Vue学习笔记（双向数据绑定、样式、v-for遍历、v-if和v-show显示隐藏元素） 2020/2/14
一、v-model
（1）概念
- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
- 注意： v-model 只能运用在 表单元素中
例如：input(radio, text, address, email…) select checkbox textarea
<input type="text" style="width:100%;" v-model="msg">（2）案例（使用v-model实现简易计算器）
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" v-on:click="cal">
<input type="text" v-model="result">
</div>
<script>
var vm=new new Vue({
el:'#app',
data:
{
n1:0,
n2:0,
opt:'+',
result:0
},
methods: {
cal()
{
var str='parseInt(this.n1)'+this.opt+'parseInt(this.n2)';
this.result=eval(str);
}
},
})
</script>
</body>二、Vue中使用样式
（1）通过属性绑定设置class样式
- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定
<h1 :class="['thin', 'italic']">hello world</h1>2.在数组中使用三元表达式
<h1 :class="['thin', 'italic', flag?'active':'']">hello world</h1>3.在数组中使用 对象来代替三元表达式，提高代码的可读性
<h1 :class="['thin', 'italic', {'active':flag} ]">hello world</h1>4.在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名
<h1 :class="classObj">hello world</h1>var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: {
red: true, thin: true, italic: false, active: false }
},
methods: {
}
});（2）Vue中使用内联样式
<body>
<div id="app">
<!-- 对象就是无序键值对的集合 -->
<!-- <h1 :style="styleObj1">这是一个h1</h1> -->
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
</div><script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
styleObj1: {
color: 'red', 'font-weight': 200 },
styleObj2: {
'font-style': 'italic' }
},
methods: {
}
});
</script>
</body>三、使用vscode快速创建vue模板
第一步：进入vscode界面，使用快捷键Ctrl+shift+p，输入sni，找到首选项：配置用户代码片段。
第二步：点击首选项：配置用户代码片段，并输入html.json,并点击进入
第三步：将如下代码覆盖进html.json文件中`在这里插入代码片
Ctrl+s保存。
第四步：创建一个新的html页面，输入vh，就会自动生成一个简单的vue模板啦
参考文章链接地址
四、v-for遍历元素的使用
（1）循环普通数组
<body>
<div id="app">
<p v-for="(item, i) in list">索引值：{
{
i}} --- 每一项：{
{
item}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {
}
});
</script>
</body>（2）for循环对象数组
<div id="app">
<p v-for="(user,i) in list">Id：{
{
user.id }} --- 名字：{
{
user.name }} --- 索引：{
{
i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{
id: 1, name: 'zs1' },
{
id: 2, name: 'zs2' },
{
id: 3, name: 'zs3' },
{
id: 4, name: 'zs4' }
]
},
methods: {
}
});
</script>（3）注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引
<div id="app">
<p v-for="(val, key, i) in user">值是： {
{
val }} --- 键是： {
{
key}} -- 索引： {
{
i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼',
gender: '男'
}
},
methods: {
}
});
</script>（4）迭代数字
- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字
- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始
<div id="app">
<p v-for="count in 10">这是第 {
{
count }} 次循环</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>五、v-for的案例应用（添加人名）
（1）知识点
- unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 语法：
arrayObject.unshift(newelement1,newelement2,…,newelementX) - v-for 循环的时候，key 属性只能使用 number获取string
- key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的
字符串/数字 类型 :key 值
（2）代码实现
<div id="app">
<div>
<label>id:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" v-on:click="add" value="添加">
</div>
<p v-for="item in list" v-bind:key="item.id">
<input type="checkbox">
{
{
item.id}} {
{
item.name}}
</p>
</div> <script>
var vm=new Vue({
el:'#app',
data:
{
id:'',
name:'',
list:
[
{
id: 1,name:'jack'},
{
id: 2,name:'tom'},
],
},
methods:
{
add()
{
this.list.unshift({
id:this.id,name:this.name});
}
}
});
</script>六、v-if和v-show
（1）知识点
- v-if 的特点：每次都会重新删除或创建元素
- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
（2)两者区别
-
v-if 有较高的切换性能消耗 v-show 有较高的初始渲染消耗
-
如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show 如果元素可能永远也不会被显示出来被用户看到，则推荐使用
v-if
（3）代码实现
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>七、知识点回顾
- MVC 和 MVVM 的区别
- 学习了Vue中最基本代码的结构
- 插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show
- 事件修饰符 ： .stop .prevent .capture .self .once
- el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法
- 在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this
- 在 v-for 要会使用 key 属性 （只接受 string / number）
- v-model 只能应用于表单元素
- 在vue中绑定样式两种方式 v-bind:class v-bind:style