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

浅谈 vue实例 和 vue组件的更多相关文章

  1. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  2. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

  3. flex布局浅谈和实例

    阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...

  4. 大话大前端时代(一) —— Vue 与 iOS 的组件化

    序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...

  5. vue基础篇---vue组件《2》

    定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...

  6. vue 自学笔记(七) 组件细节问题

    前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...

  7. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  8. vue基础——vue实例

    创建一个vue实例 每个vue应用都是通过Vue函数创建一个新的Vue实例开始的 var vm = new Vue({ //选项 }) 一个Vue应用由一个通过new Vue创建的根Vue实例,以及可 ...

  9. 关于Vue实例的生命周期(2)

     关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...

随机推荐

  1. Visual Studio win平台 AI环境搭建

    内容提要:我觉得难点主要出在下载上,程序跑的都挺流畅的.下载有时会失败. 1.下载安装git.这一步主要为了下载示例和自动安装环境的python代码,直接去github上用网页下载也是一样的,git不 ...

  2. java语言复制数组的四种方法

    JAVA语言的下面几种数组复制方法中,哪个效率最高? B.效率:System.arraycopy > clone > Arrays.copyOf > for循环 1.System.a ...

  3. C#和.net框架

    第一章C#和.net框架 c#只是.net的一部分,.net不只包含C#.C#是一种程序语言,.net是一个框架/平台 C#和.NET框架 在.NET之前 20世纪90年代,微软平台多数程序员使用VB ...

  4. Ubuntu下ssh连接在服务端显示图形界面

    Ubuntu下ssh连接在服务端显示图形界面 step1 安装ssh服务 服务端安装运行ssh,在终端运行命令如下: sudo apt-get install openssh-server 在客户端安 ...

  5. DPDK flow_filtering 源码阅读

    代码部分 main.c /*- * BSD LICENSE * * Copyright 2017 Mellanox. * * Redistribution and use in source and ...

  6. raise PDFEncryptionError('Unknown algorithm: param=%r' % param) pdfminer.pdfdocument.PDFEncryptionError: Unknown algorithm

    使用pdfminer遇到的pdf文件加密问题: raise PDFEncryptionError('Unknown algorithm: param=%r' % param) pdfminer.pdf ...

  7. Enterprise Library 4.1 参考源码索引

    http://www.projky.com/entlib/4.1/Microsoft/Practices/EnterpriseLibrary/AppSettings/Configuration/Des ...

  8. Pascal-S代码注释

    注释参考博文 http://www.cnblogs.com/luxiaodou/p/6025124.html 注释代码 https://github.com/Hesitater/Pascal-S-Co ...

  9. 【Leetcode】109. Convert Sorted List to Binary Search Tree

    Question: Given a singly linked list where elements are sorted in ascending order, convert it to a h ...

  10. laravel报404错误与NGINX报404错误区别

      nginx自己配置的404页面 和laravel配置的404页面:如果报了404 :执行laravel的404页面: 那这个404页面对nginx来说意味着什么    laravel 路由和页面找 ...