Vue的基础语法
v-bind
<div id="app"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
- 你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。
- 可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
- 如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
v-if,v-else
<div id="app"> <h2 v-if="ok">Yes</h2> <h2 v-else>No</h2> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 实现与Model双向绑定，动态更新视图 var vm = new Vue({ el:"#app", // model ：数据 data:{ ok: true } }); </script>
v-for
<div id="vue"> <li v-for="item in items"> {{ item.message }} </li> </div>
注：items 是数组，item是数组元素迭代的别名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <li v-for="item in items"> {{item.message}} </li> </div> <script type="text/javascript"> var demo = new Vue({ el: '#app', data: { items: [ {"message": "张志喜1号"}, {"message": "张志喜2号"} ] } }) </script> </body> </html>
v-on
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <input id="but" type="submit" value="点击我" v-on:click="zzx"> </div> <script type="text/javascript"> //viewModel 实现与Model双向绑定，动态更新视图 var demo = new Vue({ el: "#app", data: { message: "你好啊,这里是M78星云" }, methods: { zzx: function () { alert(this.message); } } }) </script> </body> </html>
参考：jquery的事件
v-on 监听事件
事件有Vue的事件、和前端页面本身的一些事件！我们这里的click是vue的事件，可以绑定到Vue中的methods中的方法事件！
v-model:它能轻松实现表单输入和应用状态之间的双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message"> </div> <script type="text/javascript"> var demo = new Vue({ el: "#app", data: { message: "hello Vue" } }) </script> </body> </html>
v-html：将字符串转换成html标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue学习</title> 6 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 7 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> 8 </head> 9 <body> 10 11 <div id="app"> 12 <p>{{message}}</p> 13 <p>{{msg}}</p> 14 15 <!-- 将一个文本字符串转化为HTML标签的形式 --> 16 <p v-html="msg"></p> 17 </div> 18 19 <script type="text/javascript"> 20 var vm = new Vue({ 21 el: '#app', 22 data: { 23 msg: "<h1>这是一个h1元素内容</h1>", 24 message: "hello" 25 } 26 }); 27 </script> 28 </body> 29 </html>
