vue实例:
import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ el: '#app', //渲染目标 router: myRouter, //前端路由,整个项目的路由都在这 template: '<App />', //渲染内容 components: { //内容内使用到的组件 App: app }, data:{ //需要用到的数据,根实例一般不需要用 num1: 5, num2: 8, }, methods:{ //需要用到的方法,根实例一般不需要用 fn1(){ // ..... }, fn2(){ // ..... } }, computed:{ //特殊的data,get和set之前都先经过自定义处理 b(){ //简写相当于只有get return 'bbbbb' }, c:{ //完整版 get(){ return 'ccc' }, set(val){ this.a = val; } } }, watch:{ //检测变量的变化 num1(n,o){ console.log(n,o); } } })
Vue组件:
相当于上面import的app
export default { template: `<div>{{a}}<span v-html="a"></span></div>`. data(){ return{ a: '你好,<strong>张啊咩</strong>', dataC: '', dataD: '' } }, methods:{ fn1() {}, fn2() {}, }, computed:{ b(){ return 'bbbbb' }, c:methods:{ fn1() {}, fn2() {}, }{ get(){ return this.dataC; }, set(val){ this.dataC = parseInt(val) } }, d:{ get(){ return this.dataD; }, set(val){ this.dataD = parseInt(val) } } }, watch:{ d(newVal,oldVal){ console.log(newVal,oldVal); } }, props: ['inputData1','inputData2'], mixins: [ { methods:{ fn3() {} } }, { data(){ return { dataE: '' } }, methods:{ fn4() {} } } ], extends: { methods:{ fn5() {} } }, delimiters: ['<%=','%>'], beforeRouteEnter:(to,from,next)=>{ //组件进入的路由钩子 console.log("准备进入"); next(); }, beforeRouteLeave: (to, from, next) => { //组件离开的路由钩子 console.log("准备离开"); next(); } }
区别
其实vue实例和vue组件本质都是一个组件而已,大家的属性基本是一样的
但是vue实例会比vue组件多出el和router属性,而vue组件的data会被要求必须是函数,防止出现同种组件多实例共享同一个data的事情
vue实例的高逼格写法:
import App from 'app'; new Vue({ render: h =>h(App) }).$mount('#app')
我们经常写出一些整个应用就只有一个组件。
所以为了方便,
原来的 template、components ------变成------> render: h=>h(App)
原来的 el ------变成------> .$mount('#app')
ps:mount是挂载的意思
值得注意的是里面的methods
我们千万不要把里面的方法写成箭头函数的形式
因为我们避免不了在这些方法里面写this,若写成箭头函数,this的指向就会变成未被编译成vue对象的这个配置obj