浅谈 vue实例 和 vue组件
2024-10-19 05:33:20
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
最新文章
- 防SQL注入
- tyvj1113 魔族密码
- ABP的语言切换
- <转>SQL语句执行顺序说明
- ZK 使用Clients.response
- My97DatePickerBeta 时间选择控件用法
- IT职场生存法则
- Java出现No enclosing instance of type E is accessible. Must qualify the allocation with an enclosing--转
- 大数据分析神兽麒麟(Apache Kylin)
- Oracle修改字段长度以及计算天数
- hdu3732(多重背包)
- CALayer 进阶
- Android Weekly Notes Issue #286
- Python数据类型(python3)
- Chrome 下input的默认样式
- django 视图函数返回queryset对象或日期对象至浏览器ajax接收的写法
- Ubuntu 14.04安装QQ2012
- 小数据池，bytes
- [Android Pro] Android系统手机端抓包方法 和 通过File查看应用程序流量
- Why did we build Zuul? How We Use Zuul At Netflix