标签：function   目录   字符串   绑定   es6   声明   movies   点击   开发   

Vue的概述和HelloWorld的使用

Vue安装和使用的方式

• 直接用引入：直接下载开发版本并用标签引入，Vue会被注册为一个全局变量；

• CDN

  • 开发环境
  • 生产环境：对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏

• NPM

  在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

  # 最新稳定版
  $ npm install vue
  

现在初步阶段使用第一种下载的方式，并且项目中引用Vue.js文件。

Vue的HelloWorld程序

    
{{message}}
    我的ID是{{name}}
  

  

v-for展示数据列表

    

{{item}}
    

  

计数器案例---新的属性methods

method属性用于在Vue对象中定义方法；

v-on:click：该指令用于监听某个元素的点击事件，并指定点击后需要执行的方法。

    
当前计数:{{counter}}
    +
    
    -
    
  
  

语法糖：v-on:click指令可以用@click简写的方式。

模板语法

插值操作

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

    
我的id是{{id}}.
    
    
姓名：{{firstName + lastName}}
    
{{firstName}}{{lastName}}
    
{{number * 2}}
  
  

v-text和Mustache语法相似，将数据显示在页面。

    
v-text: 
    
v-text: {{message}}
  
  

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

这个将不会改变: {{ msg }}

    这个将不会改变{{message}}
  

  

v-pre指令用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

    
Mustache：{{message}}
    
v-pre：{{message}}
  
  

v-cloak指令

    {{message}}
  
  

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令。

Using mustaches: {{ rawHtml }}
Using v-html directive: 

    
Using mustache:{{rawHtml}}
    
Using v-html directive: