虽然Vue3.0的时代就要带来啦~~今天就接着复习一下Vue2.0叭

Java学术趴
139 阅读5分钟

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

👨‍🎓作者：Java学术趴

🏦仓库：Github、Gitee

✏️博客：CSDN、掘金、InfoQ、云+社区

💌公众号：Java学术趴

🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。

🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。

☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！

👋大家好！我是你们的老朋友Java学术趴，好久没有时间写文章，最近忙着找工作。没有太多的时间给大家分享文章，从今天开始给大家持续发布新的技术文章，还希望大家多多支持支持。新的一年就要到来了，还记着在前几年，从SSM到SpringBoot，在到SpringBoot+vue2.0的时代。今年估计又会发生巨大的编程语言变革。俗话说：时代的几步必然会带动科技的发展，科技的发展必将带来新一波编程语言的到来。在今年，个人认为Vue3.0的时代就会到来，现在我们正处于Vue2.0+Vue3.0的时代，今年Vue3.0必将会替代Vue2.0的存在。

我们这篇文章也是会从Vue2.0到Vue3.0来一个过度，让大家先巩固一下Vue2.0，之后Vue3.0进发。大家如果感觉有帮助的话，可以点赞多支持支持。感谢感谢~~💓💓💓

1.6 MVVM模型

1.6.1 分解结构

  • M: 模型(Model)：data中的数据。
  • V: 视图(View)：模板代码，就是盒子的结构。
  • VM: 视图模型(ViewModel):Vue实例。

1.6.2 两种重要的结论

  1. data中所有的属性，最后都出现在了vn身上。
  2. vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。

1.6.3 MVVM模型的拆分


div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>所学语言：{{language}}</h1>
</div>
​
<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止 Vue 在启动时生成生产提示。
​
    // 这就是一个 viewModel(视图模型)，视图模型就是一个Vue对象
    const vn = new Vue({
        el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。
​
        // 这个data代表的就是一个 Model(模型)
        data:{
            name:'清华大学',
            language:'English'
        }
    })
</script>

1.7 模板语法

1.7.1 模板语法的分类

  1. 插值写法:

    • 功能: 用于解析标签体内容.
    • 写法: {{xxx}}}. xxx是js表达式,且可以直接读取到data中的所有属性.可以直接获取到vm中的所有数据

  2. 指令写法:

    • 功能: 用于解析标签(包括: 标签属性、标签体内容、绑定事件....)

    我们可以在标签体内容中也使用指令写法的形式，只是需要改变为别的命令。

    举例：v-bind:href="xxx" 或 简写成 :href="xxx" 。xxx同样是js表达式

    且可以直接获取到data中的数据。可以直接获取到vm中的所有数据

备注：Vue中有很多的指令，且形式都是：v-???? , 此时我们只是拿 v-bind举个例子。

  • 插值语法

<!-- 插值语法 -->
    <!--
        注意: 在插值语法中也要使用js表达式,此时看似是一个name值,
        其实是一个赋值表达式.而不是一个字符串。将Vue中的name值赋值给 {{xxx}}}中的xxx
        一定要保证这个 xxx值与Vue中的data中的变量名一致.
    -->
    <h1>你好,{{name}}</h1>
    <!--
        {{}}} : 中的内容是一个表达式，可以使用字符串的拼接
    -->
    <h1>{{'您好, ' + name}}</h1>
    <hr/>
  • 指令语法

<!-- 指令语法 -->
    <!--
        v-bind代表的就是将该属性的属性值作为一个js表达式处理,而不是一个字符串.
        v-bind:href="url" : 代表的就是将Vue中变量名url所对用的value值赋值给href属性
                            指定的这个url便令. 这是一个赋值表达式.
                            此时就变成了: href="https://baidu.com"
        可以给任意的属性加入v-bind命令,将这个属性对应的属性值转化为一个赋值表达式进行重新的赋值.
​
        以下x对应的值并不是 hello,而是在Vue中变量名为 hello对应的值.
​
        以下y对应的值就是: world,因为没有加入v-bind命令,此时双引号中的不是一个js表达式
        只是一个单纯的字符串.
​
        这里也要保证属性对应的属性值要和Vue中的data中的变量名一致.
​
        当data中存在多层对象相互嵌套的时候，需要使用多级点的方式来获取到指定的属性值。
​
        默认是获取的data层下的数据，只有data层下的数据不用点。
    -->
    <a v-bind:href="school.url" v-bind:x="hello" y="world">点我跳转百度</a>
​
    <!-- v-bind命令的简化写法: v-bind:<===>: -->
    <a :href="school.url" :x="hello" y="world" :name="school.name">点击我跳转百度(简化)</a>

多层级的data数据


data:{
    name:'jack',
    hello:"您好",
/*在实际开发中，我们一般采用层级嵌套的方式来给定data所有的值。
* 每一个层级也是使用 对象来进行封装嵌套。此时注意访问数据的时候
* 需要使用多个点的方式来获取数据值。
*
* 因为默认的情况下获取到的是 data这一层的数值。
*
* 如果想要获取到下一层的值，需要使用 school.name 这种形式。
* */
    school:{
        name:'清华大学!',
        url:"https://baidu.com",
    }
}

1.8 数据绑定

1.8.1 数据绑定的种类

Vue中存在两种数据绑定的方式：

  1. 单向绑定(v-bind) : 数据只能从data流向页面。
  2. 双向绑定(v-model) ：数据不仅能从data流向页面，还可以从页面流向data。

备注：

  1. 双向绑定一般应用在表单类元素上(如：input、select)
  2. v-model:value 简写为 v-model，因为v-model默认收集的就是value值。

单向数据绑定：

  • 使用v-bind完成的单向的数据绑定。当Vue中的数据发生变化的时候会影响页面中的数据发生变化。但是当页面中的数据发生变化的时候，不会影响Vue中的data数据发生变化。

v-bind命令实现的的是：单项数据绑定

Vue中的data值发生变化会影响页面中的数据发生变化，但是当页面中的数据发生变化的时候不会影响Vue中的data数据发生变化。

双向数据绑定

v-model命令实现的是：双向数据绑定

当页面中数据发生变化会影响Vue中的data数据发生变化。当Vue中Data数据发生变化会影响页面中数据发生变化。

v-model : 在内部为不同的输入元素使用不同的属性并抛出不同的事件。


1. text和extarea元素使用value属性和input事件。
2. checkbox和radio使用checked属性和change事件。
3. select使用value属性和change事件。

1.8.2 数据绑定实例


<!--普通写法-->
单向数据绑定：<input type="text" v-bind:value="name" id="1"/><br/>
            <label for="1"></label>
<!--
    Vue实列是和容器一一对应的，div才是这个容器。
    而input只是这个容器中的一个标签，可以存在任意多个。
-->
双向数据绑定：<input type="text" v-model:value="name" id="2"/><br/>
            <label for="2"></label>
<!--简化写法-->
单向数据绑定：<input type="text" :value="name" id="3"/><br/>
            <label for="3"></label>
双向数据绑定：<input type="text" v-model="name" id="4"/><br/>
            <label for="4"></label>
<!--
    如下代码是错误的。因为v-model只能应用在表单类元素（输入元素）上
                   简单说就是必须存在 value值。
​
   然而h2不存在value值，在前端页面就没有数据的输入，所以根本就涉及不到
   Vue中data数据的替换。所以就没有涉及到双向的。
​
   除了表单元素的value值使用双向的 v-model 命令。
   其他的HTML元素使用v-model 命令会报错。
-->
<h2 v-model:value="name">你好啊</h2>
​
<input type="checkbox" id="check" name="singleChoice">
<label for="check">jack</label>

1.8.3 数据绑定的修饰符

v-model：存在三个修饰符


.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-bind：存在三个修饰符


.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
avatar
文章
阅读
粉丝