目录
三、data:含有零个或多个的 key/value 对,进行数据传递
四、computed:进行方法内的计算(实现一个变量依赖多个变量)
五、watch:监听变量,变量修改是触发方法(实现多个变量依赖于一个变量)
一、创建Vue实例
步骤总结:
- 页面中引入vue文件
- new一个新的Vue对象 (可将对象进行赋值)
- 在new对象中添加相关选项内容
<body> <div id="app" class="app"> <p title="test">title111</p> <p v-bind:title="title">v-bind</p> </div> </body> <!-- 在页面中引入vue --> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 创建vue实例 new Vue({ // el: "#app" el: '.app', data: { title: "test2" } }); </script>
二、el :vue实例的挂载
步骤总结:
- 在vue新对象内进行key:‘value’ 形式的挂载 例如:el:‘.test’
- value形式必须为CSS选择器语法 例如:el:‘.test’ 、el:'#test'
(强烈建议使用id进行绑定,有且只有一个)<body> <div id="app" class="app"> <p title="test">test</p> </div> <div id="main"> </div> </body> <!-- 在页面中引入vue --> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 创建vue实例 new Vue({ // el: "#app" el: '.app', }); // 将一个vue实例挂载到页面的一个页面结构 new Vue({ // 挂载点 el: "#main", }) </script>
三、data:含有零个或多个的 key/value 对,进行数据传递
总结:
- vue 对象内的 data:{} 形式创建data选项
- data 内存在零个或多个 key:value 对;
key 以字符串形式存在,可适当省略合法变量名的引号;
value 可以为任意属性。- Html结构内,使用 插值表达式 { {}} (即,双大括号) 插入data内的数据,例如:{ { msg }}
注意:差值表达式内可以进行运算- JS结构内的到相应变量的方式:
- 直接获取vue实例对象, 例如 : console.log(app)
- 使用$,获取vue实例对象内的data对象,例如: console.log(app.$data)
- 获取data下的相应变量名,例如: console.log(app.$data.msg)
- 直接通过vue对象获取data下的变量,例如: console.log(app.msg)
<body> <div id="app"> <!-- 插值表达式 --> { { msg }} { { num }} <!-- 插值表达式中可以进行运算 --> { { 1 + 2 + 3 * 4 }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", // 为挂载点内部的vue变量提供值 data: { msg: "hello world!", num: 88888 } }) </script> <script type="text/javascript"> // 获取msg,num变量的值 // 1.得到vue实例 console.log(app); // 2.获取vue变量data: $data console.log(app.$data); // 3.获取目标变量值 console.log(app.$data.msg); // 直接获取值 console.log(app.msg); console.log(app.num); </script>
三、methods:可以通过实例及表达式,进行调用的方法。
总结:
- 在vue对象内的创建 methods:{} ,存放方法
- methods内方法以 方法名:function(参数){} 的形式存放。
- methods内的方法,可以直接在JS结构体内进行调用,例如:vue对象名.方法名()