vue.js之个人总结

 

1、MVVM模式

    MVVM模式（Model-View-ViewModel）的运作如下图：

1）上图解析：ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

 

2）可以通过hello word例子进一步解析：

    
        "UTF-8">
        
    

    
        
        
"app">
            {{ message }}
        
    
    
    

根据上例中，可以看出使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

1. 定义View
2. 定义Model
3. 创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到

...

这个元素；

data属性指向Model，data: exampleData表示我们的Model是exampleData对象。

Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

 

3）、双向绑定

  在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

  可以将上例中的view部分改为

"app">
    
{{ message }}

"text" v-model="message"/>

效果如下图：当更改文本框的值时，

{{ message }}

 中的内容也会被更新。

当然，反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。

通过该例子可以总结如下：

Vue实例的data属性指向exampleData，它是一个引用类型，改变了exampleData对象的属性，同时也会影响Vue实例的data属性。

 

2、Vue.js的常用指令

 上面用到的v-model是Vue.js常用的一个指令

• v-text
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model

1）v-text 

HTML：
"app2" v-text="msg">

js:
//v-text
var example={
    msg:'hello word!'
}
new Vue({
    el:'#app2',
    data:example
})

 

 

2)v-html

    更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。

"html">

 

 

3)v-show

  根据表达式之真假值，切换元素的 display CSS 属性。

  当条件变化时该指令触发过渡效果。

HTML：
"app4"  v-show="local">这是一个v-show命令指令


js:
var local=new Vue({
    el:'#app4‘，
    data：{
        local：true
  }
})

//结果：在页面上显示这段话：这是一个v-show命令指令

//如果设置data：{local：false}则不显示

 

 

4）v-if

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

{{#if ok}}
  
Yes

{{/if}}

在 Vue.js ，我们使用 v-if 指令实现同样的功能：

if="ok">Yes

也可以用 v-else 添加一个 “else” 块：

if="ok">Yes
else>No