vue指令

1·1：v-on

作用：为html元素绑定事件监听

语法：v-on：事件=“函数名称（）”

语法糖：@事件=“函数名称（）”

【注意】函数定义在methods配置项中

 <button v-on:click="fun()">点击</button>
 <button @click="fun2()">点击简单</button>

1·2：v-for

作用：遍历data中的数据我，并在页面进行数据展示

语法：v-for=“(item,index) in arr”

item表示遍历得到的元素，index表示item的索引

 <li v-for="(n,i) in info">{{n.title+n.boolean}}</li>

1·3：v-bind

作用：绑定html元素的属性

语法：v-bind：属性名=’ 表达式 ‘

语法糖：：属性名=’ 表达式 ‘

//绑定一个属性
<img v-bind:src="myurl">

//绑定多个属性
<img v-bind=“{src:myurl,title:msg}”>

语法：

<a v-bind:href="url">{{msg}}</a>
<!-- v-bind的简写 -->
<a :href="url">{{msg}}</a>

1·4：v-if指令

作用：判断是否加载固定的内容

语法：v-if=表达式

根据表达式结果的真假，确定是否显示当前元素

true表示加载该元素，false表示不加载该元素【显示和隐藏是对DOM元素进行添加和删除】

<h4 v-if="bool">v-if了解一下</h4>

v-show和v-if区别

v-if有更高的切换消耗（安全性高）

v-show有更高的初始化的渲染消耗（对安全性没有要求）

1·5：v-else

作用：必须配合v-if进行使用，否则无效，当v-if条件不成立的时候执行

<h5 v-if="bool">收破烂了解一下</h5>
<h5 v-else>\(^o^)/~\(^o^)/~</h5>

1·6：v-else-if

作用：当有一项成立时执行

1·7：v-text

作用：操作网页元素中的纯文本内容，{{}}是其的一种写法

<h5 v-text="text"></h5>

v-text与{{}}区别

• v-text与{{}}等价，
• {{}}叫做插值模板，v-text叫做指令
• 屏幕闪动：在渲染数据量比较大的数据的时候，可能会把大括号给显示出来

解决屏幕闪动的问题

• 使用v-text对页面进行渲染数据
• 使用{{}}语法进行渲染，同时使用v-cloak指令（用于保持元素，直到关联实例结束后进行编译）
• v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以
• 同时注意在css中需要设置[v-cloak]{display:none;}

1.8：v-html

作用：双大括号会将数据解释为纯文本，而非html

语法：

 <p v-html="text" class="list">{{text}}</p>

在网站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

1·9：v-once

作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)

语法：

{{text}}

导致 XSS 攻击。所以只能在可信内容上使用 v-html，且永远不能用于用户提交的内容上。

1·9：v-once

作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)

语法：

{{text}}

二：watch监听

可以监听模型数据，当模型数据改变的时候就会触发

语法：watch：{

监听的data数据（newval，oldval）{

console.log（newval+“—————"+oldval）

​ }

}

【注意】：watch初始化的时候不会运行，只有数据被改变之后才可以运行。

watch：当需要在数据变化时执行异步或开销较大的操作的时，watch合格方式最有用

   <div id="demodiv">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:""
                
            },
            watch:{
                text(newval,oldval){
                    console.log(`${newval}---${oldval}`)
                }
            }
        })

2·1：计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的，计算属性只有在他相关依赖发生改变时才会重新求值

而方法绑定数据只要被调用，方法将总是再次执行函数

所以计算属性相对于方法在处理特定场合下节省资源性能

2·2：计算属性与监听的区别

当需要在数据变化是执行异步或者是开销较大的操作时，watch最有用

当watch监听的值发生改变是就会被调用，

当计算依赖的值发生改变的时候才会被触发

三：Todolist

做法步骤：

1.先创建模拟数据 并且进行页面的循环展示

2.任务总数显示当前所有的任务数量

3.任务列表的添加操作

​ (1)添加事件创建添加的方法

​ (2)得到输入框的值

​ (3)吧得到的值push到obj中

​ (4)清空输入框

​ 4.勾选变色

​ (1)需要给每条数据加一个标识（用来保存当前这条数据是否被勾 选的状态）

​ (2)给复选框绑定刚才的勾选状态变量

​ (3)给要改变样式的元素 设置v-bind 并且设置三元判断

​ (4)给对应的类名设置样式

​ 5.勾选删除

​ (1) 把要删除的数据赋值给一个变量来存储

​ (2) 把原始数据清空

​ (3) 循环这个新数据

​ (4) 判断每一条数据中的style如果为false

​ (5) 就把这调数据插入到原始数据中

​ 6.剩余数量

​ (1)循环展示的原始数据

​ (2)判断style是否为false

​ (3)为false 那么就在方法中对return的返回值+1

​ (4)return 出最终数据

 <div class="todo">
        <h1>任务列表</h1>
        <p>任务总数: {{obj.length}} ；还有：{{has()}} 未完成； <button @click="del()">【完成】</button> </p>
        <ul>
            <li v-for="(v,i) in obj">
                <input type="checkbox" v-model:class="v.style"/>
                <!-- 页面的渲染 -->
                <span v-bind:class="v.style?'active':''"  v-if="v.edit" @click="edit(i)">{{v.title}}</span>
                <input type="text" v-model="v.title" v-else @blur="edit(i)">
            </li>
        </ul>
        <!-- 添加事件 -->
        <input type="text" v-model="listval"><button @click="add()">添加</button>
    </div>

</body>

</html>
<script>
    new Vue({
        el:".todo",
        data:{
            obj:[
                {title:"来自美国的苹果",style:false,edit:true},
                {title:"来自刚果的盆地",style:false,edit:true},
                {title:"来自南非的钻石",style:false,edit:true},
                {title:"来自中国的历史",style:false,edit:true},
            ],

            listval:"",
        },

        methods:{
            //添加事件
            add(){
                //将input框的内容插入objli
                this.obj.push({title:this.listval,style:false,edit:true});
                this.listval=""
            },

            // 删除事件
            del(){
                let newobj=this.obj;
                this.obj=[];
                for(let i=0;i<newobj.length;i++){
                    if(newobj[i].style==false){
                        this.obj.push(newobj[i]);
                    }
                }
            },

            //剩余数量

            has(){
                let num=0;
                // 遍历数组
                this.obj.forEach((item,index) => {
                    if(this.obj[index].style==false){
                        num+=1;
                    }
                });
                return num;

            },

            // 编辑事件
            edit(i){

                if(this.obj[i].style){
                    return
                }

                this.obj[i].edit=!this.obj[i].edit
            }

        }
    })

</script>

1·3：bootstrap的使用：

第一步：下载

cnpm install --save bootstrap

第二步：使用bootstrap容器

第三步：引入bootstrap的css，jquery的js，bootstrap的js，

第四步：查看bootstrap的文档