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>name</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