7 el和data的两种写法
首先做一个简单的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'vue' } }) </script> </body> </html>
查看页面，发现name被插值进去了，控制台也没有错误
按照我们的写法，是通过el和容器进行关联，其实不用写el属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false //el的两种写法 const v=new Vue({ //第一种写法 直接使用eq关联容器 //el:'#root', data:{ name:'vue' } }) //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活 //mount意为挂载 v.$mount("#root") console.log(v) </script> </body> </html>
7.1 el的第一种写法
new vue的时候配置el属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false //data的两种写法 const v=new Vue({ //第一种写法：对象式 el:'#root', data:{ name:'vue' } }) </script> </body> </html>
7.2 el的第二种写法
先创建vue实例，随后再通过vm.$mount('#root')指定el的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false //el的两种写法 const v=new Vue({ //第一种写法 直接使用el关联容器 //el:'#root', data:{ name:'vue' } }) //第二种写法使用mount指定容器，相比于第一种写法，这种写法更加的灵活 //mount意为挂载 v.$mount("#root") </script> </body> </html>
7.3 data的第一种写法
对象式：直接创建对象在data中写属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false //data的两种写法 const v=new Vue({ //第一种写法：对象式 el:'#root', data:{ name:'vue' } }) </script> </body> </html>
7.4 data的第二种写法
函数式：编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的,这种写法虽然麻烦，但是更灵活，通常配合组件使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备一个容器 --> <div id="root"> <h1>你好,{{name}}!</h1> </div> <script type="text/javascript"> // 设置为 false 以阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false const v=new Vue({ //第二种写法：函数式，编写一个函数且必须返回一个对象，对象里面的数据，就是你所需要的 //这种写法虽然麻烦，但是更灵活，通常配合组件使用 el:'#root', data(){ //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了 console.log(111,this) // 这个函数是vue自动帮我们调用的 return{ name:'张三丰' } } }) </script> </body> </html>
7.5 注意事项
由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了
比如现在有一个箭头函数，我们打印this对象
data:()=>{ //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了 console.log(111,this) // 这个函数是vue自动帮我们调用的 return{ name:'张三丰' } }
控制台显示this是一个全局的window对象，而不是vue实例
我们改成普通函数再试试
data(){ //此处的this是vue实例对象，想要调用this前提必须是data函数是一个普通的函数，如果写成一个箭头函数，那么这个this就是全局的window，而不是vue实例对象了 console.log(111,this) // 这个函数是vue自动帮我们调用的 return{ name:'张三丰' } }
this就变成了vue实例了
7.6 总结
- data和el的两种写法
- 1 el有两种写法
- (1).new vue的时候配置el属性
- (2).先创建vue实例，随后再通过vm.$mount('#root')指定el的值
- 2 data有两种写法
- (1)对象式
- (2)函数式
- 如何选择：目前哪种写法都可以，如果使用组件，data必须使用函数式，否则会报错
- 3 一个重要的原则
- 由vue管理的对象，一定不要写箭头函数，不然this就不是vue实例了
