Vue（一）

Vue 2.0

特性

• 数据驱动视图

  • 数据的变化会驱动视图自动更新
  • 好处：程序员只管把数据维护号，那么页面结构会被vue自动渲染

• 双向数据绑定

  在网页中form表单负责采集数据，Ajax负责提交数据

  • js数据的变化会自动渲染到页面上
  • 页面上表单采集的数据发生变化的时候，会被vue自动获取，更新到js数据中

数据驱动视图和双向数据绑定的底层原理是MVVM（Mode数据源、View视图、ViewModel就是vue的实例）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HAML8g4k-1653556869630)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422151844430.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c9jfRyAI-1653556869632)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422152032664.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t0ziWqBS-1653556869632)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422152829022.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gQfrP3y-1653556869633)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422154911947.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RV041J4g-1653556869634)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422155045436.png)]

vue的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-18YtkmWn-1653556869634)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422155231754.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4trHN4rF-1653556869635)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422162011450.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5C2zBXrO-1653556869636)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422162312085.png)]

vue指令

1、内容渲染指令

• v-text的缺点：会覆盖元素内部原有的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHleEDVN-1653556869636)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422162334903.png)]

• {{}}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YE2ehLQE-1653556869637)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422163146805.png)]

• v-html：把带有标签的字符串，渲染成真正的html内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wYUQOBjv-1653556869637)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422163546494.png)]

2、属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

• v-bind:为元素的属性动态绑定值

  • 简写是英文的:

  • 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

  • <div :title="'box' + index">这个是一个div</div>
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mh0Rf7oE-1653556869638)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422170724029.png)]

1.3、事件绑定

v-on:简写是@

<button @click="add"> </button>

methods:{
    add(){
        //如果在方法中要修改data中的数据，可以通过this访问到
        this.count+=1
        
    }
}

$event的应用：如果默认事件对象e被覆盖了，则可以手动传递一个$event

<button @click="add(3,$event)"></button>
methods:{
    add(n,e){}
        
    
}

• v-on:click
• v-on:input
• v-on:keyup

事件修饰符

• prevent

• <a @click.prevent="xxx">
  

• stop

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zGTQvgr3-1653556869639)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422172709126.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ibhshl4f-1653556869639)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422173937422.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBb4iUfY-1653556869640)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422175929456.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sBDJLoy4-1653556869640)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422190925478.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JHBRsUUj-1653556869641)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422191928781.png)]

v-model指令

• input输入框
  • type=“radio”
  • type = “checkbox”
  • type=“xxxx”
• textarea
• select

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSOGoASN-1653556869641)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422194631759.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-salkJJkq-1653556869642)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422200011424.png)]

5.条件渲染指令

• v-show ：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
  • 如果要频繁的切换元素的显示状态，用v-show性能会更好
• v-if：每次动态创建或移除元素，实现元素的显示和隐藏
  • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素可能也不需要被展示出来，此时v-if性能更号
• 在实际的开发中，绝大多数情况，不用考虑性能问题，直接使用v-if即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XE7HUkc6-1653556869643)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422223920127.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvASviPH-1653556869643)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422224332990.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B8MzXM1R-1653556869644)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220422225120380.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S9mRvW78-1653556869644)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220423082835722.png)]

mg-XE7HUkc6-1653556869643)]

[外链图片转存中…(img-nvASviPH-1653556869643)]

[外链图片转存中…(img-B8MzXM1R-1653556869644)]

[外链图片转存中…(img-S9mRvW78-1653556869644)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-McwmYoX5-1653556869645)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220423093305471.png)]