一、vue变量

所有的 vue变量 ,必须在data:中有注册(哪怕内容是空,相当于声明这个是变量,是vue变量而不是js变量)。这里的变量也可以运算。(注意:所有的框架一定要注意js变量和框架的变量,js变量和框架的变量是可以相互转换,获取的。框架的变量有这个框架变量的定义方法,如东信公司的DD变量的定义;如vue变量必须在data中定义(注册)或者methods(方法注册的地方))

  1、组件的data必须是函数。

  2、vue 变量的修改(vue变量的改变,视图同步更新。):

this.age = 16

  3、vue变量改变,视图不会同步更新的情况:

    参考 我的 另外一篇博客:https://www.cnblogs.com/wfblog/p/10544303.html

二、vue函数

所有的方法事件函数,必须在methods中。methods中函数的  this指向vm,获取data中的值可以直接 this.name获得和修改。

  其它的地方在实例创建之前(如生命周期beforeCreate函数中,全局中)获取data的值,必须指明对象,vm.name  获取。

  vue中可以调用外面全局的方法,外面全局环境中也可以调用vue中的方法,使用vm.fun。(这样就解决了,vue中不能jQuery操作DOM的问题了)

三、DOM中绑定vue数据                                  参考   https://www.cnblogs.com/fly_dragon/p/6218675.html

  1、文本数据:

      1、 {{ }}方法  :     eg:<span>Hello {{ name }}</span>

      2、v-html 指令  :   如果是标签内所有的文本

   2、属性绑定:       语法   <标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>

      指令中绑定的数据,不能使用   {{  }}方法,直接填 data里的属性名就可以了。

      注意: v-bind:value绑定的表单的值,不能双向数据绑定,v-model可以。

  3、class属性:(class和style是多属性值属性,所以vue除了上面的语法,又另外做了处理)

     1、绑定样式对象   :

代码:
<div v-bind:class="{ active: isActive }"></div>
解释:
当 isActive为 true时, div就会具有了active样式类,如果 isActive为false,那么div就去掉active样式类。
直接在html属性中的双引号内写对象,还是很不爽,也没有智能提示,很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象,这样就非常方便了,
既可以有智能提示,又可以很复杂进行编辑,不用担心烦人的""了。 <div id="app">
<div class="static"
v-bind:class="classObject">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>

      2、绑定样式数组  :

<div v-bind:class="[activeClass, errorClass]">

data: {
activeClass: 'active',
errorClass: 'text-danger'
}

         3、style属性

        CSS属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case)

<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">

   var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});

    4、表单选中值的绑定用 v-model   ,比如select标签选中的值是什么和v-model绑定

    5、v-model是双向数据绑定,v-bind是单向的数据绑定。下面两个是等效的

       参考 详解 v-model :  https://www.jianshu.com/p/4147d3ed2e60

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

    6、v-model绑定的不一定是表单的value属性值(一般都是value属性值,Radio和Checkbox有所不同),

      如:单选Checkbox中v-model绑定的是checked属性值,原生标签中只要就这个属性有就是被选中的。用vue通过v-model绑定的变量就可以知道是不是选中。

        参考 : https://www.cnblogs.com/dyfbk/p/6868350.html

四、计算属性 computed :https://www.cnblogs.com/gunelark/p/8492468.html

  总结:计算属性 默认只有getter,不过在需要时你也可以提供一个setter (setter 是反过来执行的函数,当计算属性值被改变,执行setter 函数) 

  computed: {
totle: {
set (val) { // totle 值的改变会触发这里的函数。但是下get函数引起的totle改变除外
console.log('set')
this.msg += 'dfd' // 这里msg改变会引起get函数的执行。只要get函数中使用到的vue数据发生变化都会触发get函数的执行。
},
get () { // 这里引起的 totle 值改变,不会触发set里面的函数。
console.log('get') // 正式开发,这里是不推荐有其他业务代码的,只有一个 return数据
return this.msg + this.tt
}
}
}

五、列表渲染

   1、列表渲染中的 vue 变量,凡不是一 object.name 形式的变量,渲染出来的结果是一样的。所以如果每一列可能不同的,都必须转化为object.name形式的变量。

   2、vue循环渲染可以和条件渲染结合起来使用的

六、事件绑定

绑定一个事件
<button v-on:click="say">Say</button> 绑定多个事件
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)"> 有修饰符的绑定事件
<a v-on:click.stop='doThis'></a>

vue.js移除绑定的点击事件   :  https://blog.csdn.net/tsingsn/article/details/77196167

七、过滤器

在vue2.0里 管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。(v-model的数据怎么使用过滤器还不清楚)

vue里面的vue变量名和方法名还有过滤器名字都不能相同,全局作用域中都可以通过vue对象直接获取到。

new Vue({
el: '#app',
data: {
},
filters: {
capitalize: function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});

Vue2.0里过滤器容易踩到的坑  : https://blog.csdn.net/sinat_36555135/article/details/70678478

八、常用生命周期

实例生命周期钩子(微信小程序框架和它类似) :  可以把周期钩子  看做  不同时期的人口函数

    参考  :  https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子  或  https://segmentfault.com/a/1190000008010666

常用的生命周期有:

  1、beforeCreate (2.0版本前叫 init)  :  在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。

  2、mounted   (2.0版本前叫 ready)   :  在编译结束和$el第一次插入文档之后调用

    vue生命周期中执行函数不可出现vue对象(如vm,vm = new Vue()),因为在 new Vue()过程还没有完成vm的赋值(此时的vm是undefined),所以此时内部执行语句出现 vm ,变量就会报错。

    3、destroyed :在实例被销毁之后调用。单页面用中页面跳转时组件页面就会被销毁。定时器的功能相当于另外开了一个进程,vue组件销毁,并不能结束定时器的程序。需要手动清除定时器,一般都是在销毁的生命周期中执行。

九、watch  监听数据变化

参考  :  https://blog.csdn.net/lemon_zhao/article/details/52191527

注意:watch中监听的数据的事件函数,如果是methods中的方法,只能使用字符串,这里不能使用vm.fun对象获取。

   v-bind绑定的数据,视图改变不一定使vue变量同步改变,所以不会触发watch中的函数。

new Vue({
el: '#app',
data: {
name: ""
},
methods: {
queryTrendData: function() {
}
},
watch: {
'name': 'queryTrendData',
}
});

十、

vue2 核心概念的更多相关文章

  1. 领域驱动设计(DDD)部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  2. Javascript本质第一篇:核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

  3. [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)

    本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...

  4. spring技术核心概念纪要

    一.背景 springframework 从最初的2.5版本发展至今,期间已经发生了非常多的修正及优化.许多新特性及模块的出现,使得整个框架体系显得越趋庞大,同时也带来了学习及理解上的困难. 本文阐述 ...

  5. ElasticSearch学习笔记-01 简介、安装、配置与核心概念

    一.简介 ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进 ...

  6. Playmaker Input篇教程之引入的核心概念

    Playmaker Input篇教程之引入的核心概念 Playmaker Input引入的核心概念 Playmaker引入了4个核心概念:状态机.动作.变量和事件.了解它们是学习操作Playmaker ...

  7. Maven的几个核心概念

    POM (Project Object Model) 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它 ...

  8. 刀哥多线程GCD核心概念gcd

    GCD GCD 核心概念 将任务添加到队列,并且指定执行任务的函数 任务使用 block 封装 任务的 block 没有参数也没有返回值 执行任务的函数 异步 dispatch_async 不用等待当 ...

  9. cocos2d-x一些核心概念截杀

    Cocos2d-x中有很多概念,这些概念很多来源于动画.动漫和电影等行业,例如:导演.场景和层等概念,当然也有些有传统的游戏的概念.Cocos2d-x中核心概念:导演, 场景,层,节点,精灵,菜单动作 ...

随机推荐

  1. Linux下github的使用

    在linux下搭建git环境 1.创建Github账号,https://github.com 2.Linux创建SSH密钥: ssh-keygen ##一直默认就可以了 3.将公钥加入到Github账 ...

  2. kubernetes使用kubeadm升级集群

    升级前准本  官网: https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm-upgrade/查看可升级的组件 [root@h ...

  3. vue 微信公众号分享后支付失效页面URL不变的坑

    微信分享后支付页面还是初始页面,这个问题解决了, created(){ //判断是否是IOS设备 // IOS分享时的页面是首页,也就是进入页而不是当前页.所有可以采用刷新当前页,让进入页的链接改成当 ...

  4. UML的类型

    分类 UML从考虑系统的不同角度出发,定义了用例图.类图.对象图.包图.状态图.活动图.序列图.协作图.构件图.部署图等10种图. 常见的UML图有用例图(Use Case Diagram).类图(C ...

  5. 正则匹配class并替换整个class为空

    str.replace(/class=[\"|'](.*?)[\"|'].*?/g, '')

  6. HTML-参考手册: 画布

    ylbtech-HTML-参考手册: 画布 1.返回顶部 1. HTML5 <canvas> 参考手册 描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 ...

  7. python学习笔记:循环语句——while、for

    python中有两种循环,while和for,两种循环的区别是,while循环之前,先判断一次,如果满足条件的话,再循环,for循环的时候必须有一个可迭代的对象,才能循环,比如说得有一个数组.循环里面 ...

  8. 转 Python - openpyxl 读写操作Excel

    Python - openpyxl 读写操作Excel   openpyxl特点   openpyxl(可读写excel表)专门处理Excel2007及以上版本产生的xlsx文件,xls和xlsx之间 ...

  9. selenium学习笔记(1)

    selenium http://selenium-python.readthedocs.io/index.html https://www.seleniumhq.org/projects/ide/ 声 ...

  10. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...