Vue2学习（1）-CFANZ编程社区

VUE2

简介

用于构建用户界面的前端框架；简化DOM操作；响应式数据驱动(https://cn.vuejs.org)
vue 框架的特性:
数据驱动视图:vue 会监听数据的变化，从而自动重新渲染页面的结构
双向数据绑定:在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中
第一个实例：1.导入开发版本vue.js;
2.创建实例，设置el和data属性；
3.使用简洁的模块语法把数据渲染到页面上

el：挂载点，类选择器等都可以，建议id选择器；支持双便签除了html和body; 作用是管理el选项命中的元素及其内部的后代元素。
data:数据对象，可以是数组，索引等，遵循JS
methods:函数方法
computed:计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
methods和computed: 可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

vue 的指令与过滤器

内容渲染指令

v-text:设置标签的文本值；部分文本改变使用{{}}，字符串拼接使用‘+’
v-html:设置标签的innerHTML(普通文本和v-text无异)
{{ }}

属性绑定指令
v-bind：为元素绑定属性，可省略v-bind;
例如： :src="" :title="" :class=""

事件绑定指令

v-on：为元素绑定事件，v-on:事件名(如v-on:click、v-on:input、v-on:keyup等);
在vue实例中的methods:{}写方法;
可以使用‘@’替换v-on;
通过this关键字访问data数据。
函数()里可传递自定义参数，另外‘$event’ 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event，如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
```
<button @click="add(3, $event)"></button>

methods: {
   add(n, e) {
			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
			this.count += 1
   }
}
```
事件修饰符限制事件，来辅助程序员更方便的对事件的触发进行控制，常见如下

在这里插入图片描述

按键修饰符，监听键盘事件，例如@keyup.enter等

双向绑定指令

v-model:获取和设置表单元素的值(双向数据绑定)；同步更新
v-model 指令的修饰符:
- .number:自动将用户输入值转为数值类型
- .trim:自动过滤用户首尾空白字符
- .lazy:在改变后更新，过程不更新

<div id="app">
        <input type="text" v-model.number="n1">+
        <input type="text" v-model.number="n2">=
        <span>{{n1 + n2}}</span>
    </div>

    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                n1: '',
                n2: '',
            }
        })
    </script>

条件渲染指令

v-show:根据表达值的真假，切换元素的显示和隐藏(添加或移除display：none属性，适合频繁切换)
v-if 同上(创建或移除dom元素)；可以用 v-else 指令给 v-if 添加一个 “else” 块；v-else-if,用作v-if的else-if块

列表渲染指令

v-for:基于一个数组生成一个列表结构，v-for 指令需要使

用 item in items 形式的特殊语法，items 是待循环的数组，item 是被循环的每一项。
v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items
为了提高渲染的性能，需要为每一项提供唯一的key属性，注意事项：
- key 的值只能是字符串或数字类型
- key 的值不能重复
- 建议把数据项 id 属性的值作为 key 的值

实例+点击切换图片：

<div id="app">
   <p>{{ message }}</p>
    
    //v-text的使用
   <p v-text="message+'!!'" ></p>
    
    //v-html,v-show
   <p v-html="itheima" v-show="isTrue" ></p>
    
    //v-on,可以用‘@’替换
    <input type="button" value="单击" @click="doit"><br>
     
    //v-bind绑定属性，可以用:号替换
<img :src="imgArr[index]" :title="imgTitle"><br>
    //实现点击切换图片  
<input type="button" value="上一张" @click="prev">
<input type="button" value="下一张" @click="next"><br>
        
<ul>
    //v-for生成列表
    <li v-for="(it,index) in arr">
           {{index+1}}:{{it}}
    </li>
 </ul>
</div>

//vue实例中：
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"帅帅帅！",
            itheima:"<a href='http://www.itheima.com'>黑马</a>",
            isTrue:true,
            imgTitle:"wife",
            imgArr:[
                "./images/00.jpg",
                "./images/01.jpg",
                "./images/02.jpg",
                "./images/03.jpg",
                "./images/04.jpg",
            ],
            index:0,
            arr:["iii","assa","asd"]
        },
        methods:{
            doit:function(){
                this.message="lizhi",
                this.isTrue=!this.isTrue
            },
            //点击上一张切换图片
            prev:function(){
                if(this.index<=0){
                    this.index=this.imgArr.length-1
                }else{
                    this.index--
                }
            },
            //点击下一张切换图片
            next:function(){
                this.index=(this.index+1)%this.imgArr.length
            }
        }
    })
    </script>