Vue的部分指令系统以及 数据变化后页面不重新渲染的解决方法

前言

本文介绍了vue的部分基本指令，想了解更多基本指令，请阅读上篇文章。
ps：由于这是小编第二次创作，有很多不足的之处，希望各位大神海涵，欢迎各位大神在评论区补充 。

---

一、列表循环

1、遍历数组 < v-for=“每次要遍历的元素 in/of 数据源”> 或者可以写成 < v-for = “(每次要遍历的元素，下标) in/of 数据源”>
2、遍历对象 和上者一样，只是第二个参数变成键值对中的键名了，如果想要下标，我们需要第三个参数 ，注意数组没有第三个参数！！
2、遍历整数 < v-for=“每次要遍历的元素 in/of 整数最大值”>
ps：所谓的每次要遍历的元素就是我们新起的变量，只不过这个变量是空的。
小练习：九九乘法表

<p v-for="arr in  9">
            <span   v-for="arr2 in arr">{{arr}}&nbsp;&nbsp;*&nbsp;&nbsp;{{arr2}}&nbsp;&nbsp;=&nbsp;&nbsp;{{arr*arr2}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</p>

二、表单元素双向数据绑定

1设计模式：也就是网站的开发模式

 MVC
 M      model是数据模型层，所谓的视图模型成，就是data里的代码
 V       view是视图层，所谓的视图层就是，在vue挂载点里的html代码
 C       controller是控制器
 
MVVM
 M      model是数据模型层
 V       view是视图层
 VW   viewmodel视图模型层

(1)文本框

 <div id="app">
     <!-- 视图层 -->
     <input type="text" v-model="msg">
     <h1>{{ msg }}</h1>
</div>
<script>
    new Vue({
        el:"#app",
        data:{//model 数据模型层
            msg:'hello'
        }
    })
</script>

(2)文本域

<textarea cols="30" rows="10">{{ msg }}</textarea>

(3)复选框

①布尔值

<div id="app">
	<input type="checkbox" v-model="isagree">是否同意协议{{ isagree }}
</div>
<script>
	 new Vue({
        el:"#app",
        data:{
            isagree:false
        }
    })
</script>

②数组

<div id="app">
	<div>
        <label>兴趣爱好：</label>
        <input type="checkbox" v-model="hobbys" value="打游戏">打游戏
        <input type="checkbox" v-model="hobbys" value="看电影">看电影
        <input type="checkbox" v-model="hobbys" value="逛吃">逛吃
        <input type="checkbox" v-model="hobbys" value="打豆豆">打豆豆
        <span>已选择：{{ hobbys }}</span>
    </div>
</div>
<script>
	 new Vue({
        el:"#app",
        data:{
            hobbys:[]
        }
    })
</script>

当v-model用于复选框时，需要设置value属性

(4)单选框

<div id="app">
    <input type="radio" v-model="status" value="1">正常
    <input type="radio" v-model="status" value="2">禁用
</div>
<script>
	 new Vue({
        el:"#app",
        data:{
            status:1
        }
    })
</script>

当v-model用于单选框时，需要设置value属性

(5)下拉菜单

<div id="app">
    <select @change="change" v-model="kemu">
        <option value="">--请选择--</option>
        <option value="1">web前端</option>
        <option value="2">java开发</option>
        <option value="3">ui设计</option>
    </select>
</div>
<script>
	 new Vue({
        el:"#app",
        data:{
            kemu:1
        }
    })
</script>

三、数据变化后，页面不重新渲染

• 对象类型的解决方法：
  * 添加用Vue中的 $ set方法 三个参数 第一个参数是要追加在哪 第二个是键名 第三个是键值
  * 删除用Vue中的$delete方法 两个参数 第一个参数是要操作的元素 第二个是键名

• 数组类型的解决方法：

•      * push、unshift、pop、shift、splice
  

• 二者都可以用的：
  * Vue中的$forceUpdate方法 强制更新 无论什么数据类型 只要有他 页面都会重新渲染
  附加小提示： input取消历史提示 autocomplete=“off” css样式

总结

提示：这里对文章进行总结：
例如：以上是今天小编的部分总结，不是很专业，望各位海涵，本文也仅仅是简单的介绍了vue的基础语法，有不足的地方欢迎大家来补充，接下来我会不定时的发一些小心得，如果转载本文，请标明原处！