vue起步以及常用指令

一、起步 实例化vue、变量、数据绑定

template中只能有一个直系子元素 var 对象名 = new Vue({}) {{ }} 返回 变量、函数、数组、对象等的值 el 绑定的id值 data 数据 methods 用于定义的函数，可以通过 return 来返回函数值

<div id="start"> <h1>site : {{site}}</h1> <h1>name : {{name}}</h1> <h1>{{details()}}</h1> </div> <script> var firstvue=new Vue({ //内容 el:'#start', data :{ site:'第一天学vue', name:'是小木啊' }, methods:{ details:function (){ return this.site+this.name } }}) </script>

二、绑定属性 1、v-bind

绑定类名称 绑定多个类名称 动态操作、数组写 绑定样式style(直接绑，绑定变量，声明对象写样式） v-bind简写:value=" " v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件*元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

<template> <div id="app"> <h4>{{msg}}</h4> <input type="text" v-model="today"> <p>{{today}}</p> <h4>{{msb}}</h4> <input type="text" v-bind:value="tom"> <p>{{tom}}</p> <h4>绑定类</h4> <div v-bind:class="{b1:true,b2:true}"></div> <div v-bind:class="[b1,b2]"></div> <div v-bind:class="b1"></div> <h4>绑定style</h4> <div v-bind:style="{'color':'green'}">我命由我不由天</div> <div v-bind:style="{'color':fontc}">我命由我不由天</div> <div v-bind:style="pstyle">我命由我不由天</div> </div> </template> <script> export default { name: 'app', data () { return { msg:"v-model 双向绑定", msb:"v-bind 单项绑定", today:"firday", tom:"yesterday", b1:"b1", b2:"b2", fontc:"blue", pstyle:{ "color":"orange", "font-size":"20px" } } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h4 { color: red; } .b1 { width: 30px; height: 30px; background-color: pink; margin: auto; margin-top: 30px; } .b2 { border:solid 2px yellow; } </style>

2、v-html v-text

<h4>v-html</h4> <p v-html="content"></p> <h4>v-text</h4> <p v-text="text"></p> <script> export default { name: "app", data() { return { msg: "v-model 双向绑定", msb: "v-bind 单项绑定", today: "firday", tom: "yesterday", b1: "b1", b2: "b2", fontc: "blue", pstyle: { color: "orange", "font-size": "20px" }, content: "<h1>i love you</h1>", text: "<h1>i love you</h1>", list: [1, 2, 3, 4, 5, 43], object: { name: "菜鸟教程", url: "http://www.runoob.com", slogan: "学的不仅是技术，更是梦想！" } }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h4 { color: red; } .b1 { width: 30px; height: 30px; background-color: pink; margin: auto; margin-top: 30px; } .b2 { border: solid 2px yellow; } </style>

3、v-for

<h4>循环渲染数据</h4> <!-- 必须有key --> <ul> <!-- val index --> <li v-for="(item,index) in list" :key="item">{{item+"***"+index}}</li> </ul> <ul> <!-- index 键 值 --> <li v-for="(value, key, index) in object" :key="index">{{ index }}. {{ key }} : {{ value }}</li> </ul> <ul> <li v-for="n in 10" :key="n"> {{n}} </li> </ul> </div> <script> export default { name: "app", data() { return { msg: "v-model 双向绑定", msb: "v-bind 单项绑定", today: "firday", tom: "yesterday", b1: "b1", b2: "b2", fontc: "blue", pstyle: { color: "orange", "font-size": "20px" }, content: "<h1>i love you</h1>", text: "<h1>i love you</h1>", list: [1, 2, 3, 4, 5, 43], object: { name: "菜鸟教程", url: "http://www.runoob.com", slogan: "学的不仅是技术，更是梦想！" } }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h4 { color: red; } .b1 { width: 30px; height: 30px; background-color: pink; margin: auto; margin-top: 30px; } .b2 { border: solid 2px yellow; } </style>

注意

必须绑定key v-bind:key

4、**v-on**事件监听

简写 @click Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation() Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">

1）事件的双向绑定 2）ref获取操作的dom元素节点

<template> <div id="app"> <!-- 通过ref获取dom元素节点 --> <input type="text" ref="txt"> <button @click="getDom">获取dom元素的操作节点</button> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App', } }, methods:{ getDom(){ //获取dom元素节点 console.log(this.$refs.txt.value); } } } </script> <style lang="scss"> </style>

监听属性watch

<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script>

5、计算属性computed

<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

6、过滤器

<!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div> <div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>