vue的基础语法（实现元素赋值，循环，判断，以及事件响应）_vue 赋值
赞
踩
1、v-bind
用 v-bind 来绑定元素特性!
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> <!-- 如果要将模型数据绑定在html属性中 则使用 v-bind 指令,此时title中显示的是模型数据 title是span标签的一个属性 --> <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定信息</span> <!-- v-bind 指令的简写形式： 冒号（:） --> <h1 :title="message">鼠标悬停几秒钟查看此处动态绑定信息</h1> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ message:'页面加载于' + new Date().toLocaleString() } }); </script> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
结果：
打开浏览器的 JavaScript 控制台，输入 vm.message = ‘ddddd’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新
v-bind 属性 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”
2、v-if 系列
- v-if
- v-else-if
- v-else
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> <!-- === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等） --> <span v-if="type === 'A'">A</span> <span v-else-if="type === 'B'">B</span> <span v-else>C</span><br/> <!--当message为true,大于0的数字，字符（包括'0')，字符串（包括"0"),结果都为真--> <span v-if="message">为真</span> <span v-else="message">为假</span> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ type: 'A', message: '\u0000' } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3、v-for
语法格式：
<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
- 1
- 2
- 3
- 4
- 5
注：items 是数组，item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似！
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> <li v-for="item in items"> {{item.message}} </li> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ //items是数组 items: [ {message: 'AAAAA'}, {message: 'BBBBB'}, ] } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
4、v-on
v-on 监听事件：
事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的 methods 中的方法事件！
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> <!-- 在这里我们使用了 v-on 绑定了 click 事件 并指定了名为 sayHi 的方法 --> <button v-on:click="sayHi">点击</button><hr/> <!-- v-on 指令的简写形式 @ --> <button @click="sayHi">点击</button> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ message: 'Hello Vue' }, // 方法必须定义在 Vue 实例的 methods 对象中 methods:{ sayHi: function (event) { // `this` 在方法里指向当前 Vue 实例 alert(this.message); } } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
5、v-model
双向数据绑定
Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发 生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向 绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。
你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它 会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，
其中@input是对输入事件的一个监听
:value="test"是将监听事件中的数据放入到input，input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。
总结：
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
自定义组件使用v-model，应该有以下操作：
- 1.接收一个value prop
- 2.触发input事件，并传入新值
在原生表单元素中：
<input v-model="inputValue">
- 1
相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
- 1
在自定义组件中
<my-component v-model="inputValue"></my-component>
- 1
相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
- 1
这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this.$emit('input', value)
- 1
测试代码
文本框
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> <!-- v-bind:value只能进行单向的数据渲染 数据变视图变，视图变数据不变--> <input type="text" v-bind:value="message"/><hr/> <!-- v-model 可以进行双向的数据绑定 数据变视图变，视图变数据也变 本质上是<input :value="message" @input="message = $event.target.value" 其中@input是对<input>输入事件的一个监听 :value="message"是将监听事件中的数据放入到input--> <input type="text" v-model="message"/> <p>{{message}}</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ message:33333 } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
单选和复选框
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <div id="vue"> 性别： <!--单选框选中了哪一个是看同一组的单选框的value值是多少 --> <input id="man" type="radio" value="男" v-model="picked">男 <input id="woman" type="radio" value="女" v-model="picked">女 <p>选中了谁: {{picked}}</p> <hr/> 爱好： <input type="checkbox" value="sing" v-model="checks">唱歌 <input type="checkbox" value="dance" v-model="checks">跳舞 <input type="checkbox" value="draw" v-model="checks">画画 <p>爱好有: {{checks}}</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el:'#vue', data: { picked: '', checks:[] } }) </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
下拉框
<!--引入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <body> <!--将数据绑定到页面元素（视图层）--> <div id="vue"> 下拉框 <select v-model="select"> <!--disabled表示警用，不可改也不提交 --> <option disabled value="">请选择</option> <!--在<option>中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候， 在selected中的字符串为‘A被选'，如果我们不在<option>中设置value值的话 那么selected中的字符串将是<option>中的值‘A'--> <option value="A被选">A</option> <option>B</option> <option>C</option> <option>D</option> </select> <p>选中的值：{{select}}</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data:{ select:'' } }); </script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
**注意：**如果 v-model 表达式的初始值未能匹配任何选项，< select> 元素将被渲染为“未选中”状态。 在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此， 更推荐像上面这样提供一个值为空的禁用选项
- ...
赞
踩
