Vue说明
Vue2，data的两种写法
对象式和函数式，当使用组件时必须使用函数式，否则报错。
Vue2，el（element）的两种写法
1、new Vue()，已配置el属性。
2、创建Vue实例，再通过vm.$mount('#root')指定el的值。
重要的原则：
由Vue管理的函数（方法），使用普通函数（方法），如果使用箭头函数（方法），this不再是Vue的实例了。
代码案例
案例1：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Vue</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> --> </head> <body> <div id="app"> <h1>{{name}}</h1> </div> <script type="text/javascript" > // 阻止vue在启动时生成生产提示 Vue.config.productionTip = false; // 创建Vue实例 new Vue({ el:'#app', data:{ name: "小奋斗" }, }); </script> </body></html>案例2：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Vue</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script> --> </head> <body> <div id="app"> <h1>{{name}}</h1> </div> <script type="text/javascript" > // 阻止vue在启动时生成生产提示 Vue.config.productionTip = false; // 创建Vue实例 const vm = new Vue({ data(){ //this是Vue实例对象 console.log('this', this) return { name: "小奋斗" } }, }); vm.$mount("#app"); </script> </body></html>版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除