根 vue 实例

let viewModel = new Vue({    // 包含数据、模板、挂载元素、方法、生命周期钩子等选项})

Hello Wrold 

       
       
          Hello {
     { name }}!
       
// 这是我们的 Modelvar model = {  name: 'Vue.js'}// 创建一个 Vue 实例或 "viewModel"// 它连接 View 与 Modelvar viewModel = new Vue({  el: '#app',  data: model})

生命周期

 

上图的就是

ViewModel的生命周期，仔细的看其实并不难。目前先了解一下。

 

流程大致像这样

created()->beforeCompile()->compiled()->ready()->attached()->detached()->beforeDestroy()->destroyed()

绑定

简单的理解就是模板字符串功能，放心的在任何你想用的地方去用，假如错了vue会给你提示。

定界符都是可以修改的

// 模板定界符Vue.config.delimiters = ['{
     {', '}}']// html模板定界符Vue.config.unsafeDelimiters = ["{
     {
     {", "}}}"]

数据的绑定

消息: {
     { msg }}   
       他将永不会改变: {
     {* msg }}   
       
       
        {
     {
     { raw_html }}}
       
  
       
       
  
       

表达的绑定

不可使用，var/let关键字声明变量，也不能使用if/for流程控制。

{
     { number + 1 }}   // 做简单的运算{
     { ok ? 'YES' : 'NO' }}   // 三元表达式{
     { message.split('').reverse().join('') }}   // 调用该对象上的方法

指令

当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

Hello!
 
         
        
        
       

v-bind 缩写

过滤器

过滤器提供了一种执行文本转换的方法，比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用，也可以在的表达式中使用。

使用Vue,可以有两种不同的方式注册过滤器：全局和本地过滤器。

全局过滤器

来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器，其作用就是在价格前面加上美元符号：

// 声明一个全局的过滤器Vue.filter('toUSD', function (value) {    return `$${value}`})// 在模板中这样使用 文本插值的使用方式
       
    
        
{
     { price | toUSD}}
       

特别声明： 过滤器定义必须始终位于Vue实例之上，否则你将会得到一个“Failed to resolve filter: toUSD”的错误信息。

本过过滤器

本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写：

let app = new Vue({    el: '#app',    data () {        return {            name: 'hello world !'

}    },    // 声明一个本地的过滤器    filters: {        Upper: function (value) {            return value.toUpperCase()        }    }})
       
    
        
{
     { name | Upper }}
       

正如上例中看到的，本地过滤器存储在Vue组件中，作过filters属性中的函数。这个时候你想注册多少个就能注册多少个：

let app = new Vue({    el: '#app',    data () {        return {            name: 'hello world !'        }    },    // 声明一个本地的过滤器    filters: {        Upper: function (value) {            return value.toUpperCase() }, Lower: function (value) { return value.toLowerCase() } } })

 

计算属性

       
          a={
     { a }}, b={
     { b }}
       
var vm = new Vue({  el: '#example',  data: {    a: 1  },  computed: {    // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } })

给计算属性设置setter

computed: {    fullname: {        get: function() {            return this.firstName + ' ' + this.lastName        },        set: function() {            let names = newValue.split(' ')            this.firstName = names[0] this.lastName = names[names.length - 1] } } }

Class 与 Style 绑定

vue特意增强了他们，支持对象和数组绑定

Class 对象绑定

        
data: {    isA: true,    isB: false}
        
data: {    classObject: {        'class-a': true        'class-b': false    }}//渲染之后
        

Class 数组语法

        
data: {    classA: 'class-a'    classB: 'class-b'}// 渲染为
        
        
// 始终添加classA对应的类名，根据isB的值确认是否添加classB对应的值。// 在1.0.19+之后，为了更明了的写法，支持数组里面嵌套对象语法
        

Style 对象语法

CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）,自动添加浏览器的前缀。

        
data: {     activeColor: 'red',    fontSize: 30}
        
data = {    styleObject: {        color: 'red', fontSize: '13px' } }

Style 数组语法

        
data = {    styleObjectA: {        fontSize: '15px'    }}

条件渲染

特别说明: v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

v-if

yes
no
        

v-show

不支持 template 元素包裹

Hello!
// 在组件上不能使用 v-else
        
这可能也是一个组件

if 与 show 之间的战争

如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

列表渲染

        
    
         
        {
      { item.message }}    
        
var vm = new Vue({    el: '#list',    data: {        items: [            { message: 'Foo' },            { message: 'Bar'}        ]    }})

通过$index可以访问索引，且在v-for块内可以访问的到其他属性。

        
    
         
        {
      { parentMessage }} - {
      { $index }} - {
      { item.message }}    
        
var vm = new Vue({    el: '#list',    data: {        parentMessage: 'Parent',        items: [            {message: 'Foo'}, {message: 'Bar'} ] } })

为索引设置一个别名，且 1.0.17+ 之后可以使用 for of

        
// 使用一层 template 包裹
        

对象v-for

        
    
         
        {
      { $key }} : {
      { value }}    
        
        
  
         {
      { n }} 
        

方法与事件处理

        
    
         Greet
        
let vm = new Vue({    el: '#example',    data: {        name: 'Vue.js'    },    methods: {        greet: function(event) {            alert('hello'+this.name+'!') console.log(event.target.tagName) } } }) 
        
 
         Say Hi 
         Say What 
        
 new Vue({ el: '#example', methods: { say: function(msg) { alert(msg) } } })

事件修饰符

在事件处理器中经常需要调用event.preventDefault 或 event.stopPropagation

// 阻止单击事件冒泡// 提交事件不再重载页面// 修饰符可以串联// 只有修饰符
        

按键修饰符

• enter
• tab
• delete
• esc
• space
• up
• down
• left
• right

自定义按键别名

// 可以使用 @keyup.f1Vue.directive('on').keyCodes.f1 = 112