一,介绍简单的VUE实例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>VUE实例</title> <style> p { width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div id="app"> <!--title是鼠标悬浮出现的提示--> <p title="这真的是P">这是p</p> <p v-bind:title="title">这就是P</p> </div> <div id="main"> <p v-bind:title="my_title">这还是P</p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue ({ el: '#app', data: { title: '不,这不是P' } }); new Vue ({ el: '#main', data: { //在main下的my_title变量,注意不是变量名 my_title: '你已经不是P了', } }) </script> </html>
下面介绍在VUE中的几种属性
二,data属性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>VUE实例之data</title> </head> <body> <div id="app"> <!--插值表达式--> {{ msg }} {{ num }} <!--插值表达式可以直接添加逻辑语句,但是不介意这样写--> {{ 1 + 2 + 3 * 4 }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue ({ el: '#app', data: { msg: 'hello', num: '356' } }) </script> <!--下面获取VUE中赋值的数据--> <script> // 获取总的app对象 console.log(app); //获取VUE变量的data:$data console.log(app.$data); //获取目标变量值: .msg console.log(app.$data.msg); //可以直接获取 console.log(app.msg); console.log(app.num); </script> </html>
三method属性(主要是用事件的方式举例)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue实例之methods</title> </head> <body> <div class="app"> <p class="box" v-on:click="abcClick">{{ abc }}</p> <p class="box" v-on:click="defClick">{{ def }}</p> <p class="box" v-on:mouseover="action">3456</p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue ({ el: '.app', data: { abc: '真正的勇士,敢于直面惨淡的人生', def: '敢于正视淋漓的鲜血', }, //methods为挂载点内部提供方法的实现体 methods: { //冒号之前是在html中命名的事件名字 abcClick:function (ev) { console.log(ev); console.log("abc is clicked"); }, //function可以省略 defClick (ev) { console.log(ev); console.log("def is clicked"); }, action () { console.log("被悬浮"); } } }) </script> </html>
四,cmputed属性
一个变量依赖于多个变量变化,则采用computed属性
两种方式的区别:1,content在message使用的时候直接名字使用,不用加括号,而method在使用的时候需要加括号
2两种方式在缓存上也大有不同,利用computed计算属性是将 content与message绑定,只有当message发生变化时才会触发content,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue实例之computed</title> </head> <body> <div id="app"> <div> <label for="xing">姓</label><input type="text" name="xing" v-model="first-name"> </div> <div> <label for="ming">名</label><input type="text" name="ming" v-model="last-name"> </div> <div> <!-- 通过插值表达式实现 --> <div>姓名: {{ fisrt_name + " " + last_name }} </div> <!-- 通过computed实现 --> <div>姓名: {{ full_name }} </div> <!-- 通过methods实现 --> <div>姓名: {{ full_name_bac() }} </div> </div> </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue ({ el: '#id', data: { first_name: '', last_name: '', }, computed: { full_name: function() { return this.first_name + ' ' + this.last_name; } }, methods: { full_name_bac: function() { return this.first_name + " " + this.last_name; } } }) </script> </html>
五,watch属性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>watch</title> </head> <body> <div id="app"> <div> <label>姓名:</label> <input type="text" v-model="full_name"> </div> <p>姓: {{ first_name }} </p> <p>名: {{ last_name }} </p> </div> </body> <script src="js/vue-2.5.17.js "></script> <script> new Vue ({ el: '#app', data: { full_name:'', first_name: '', last_name: '', }, //监视下面的变量的变换,只要一变换就会触发下面代码体的执行 watch: { full_name () { var fullName = this.full_name; console.log(fullName); //fullName就是输入的字符串 this.first_name = fullName.split(" ")[0]; this.last_name = fullName.split(" ")[1]; } } }) </script> </html>
六,delimiters属性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>delimiters</title> </head> <body> <div id="app"> {{ msg }} ${ msg } </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: '天空好像下雨,我好像住你隔壁' }, //把VUE解析的{{}}改成${与} delimiters: ['${', '}'] }) </script> </html>
七,生命周期钩子
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>生命周期钩子</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script> new Vue({ el: "#app", data: { msg: "message" }, beforeCreate () { console.log("实例刚刚创建"); console.log(this.msg); }, created () { console.log("实例创建成功, data, methods"); console.log(this.msg); } // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块 }) </script> </html>