vue入门

Vue 实例

• 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的

var vm = new Vue({  // 选项})

• 属性与方法

var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true

• 每个 Vue 实例都会代理其 data 对象里所有的属性

如：vm.a等价于data.a

• Vue 实例的实例属性与方法都有前缀 $,以便与代理的 data 属性区分

vm.el   //会提示undefinedvm.$el  //加上$才能获取对应属性

• vue.js的实例属性

el   绑定的dom节点data  data对象watch  响应数据的变化created  HOOK函数computed 计算属性methods  实例方法components 引入局部组件

Vue.js 模板语法

• 插值（文本）:使用 {{…}}（双大括号）的文本插值：

  <p>{{ message }}</p>

• 插值（html）:使用 v-html 指令用于输出 html 代码：

<div id="app">    <div v-html="message"></div></div>

• 属性: HTML 属性中的值应使用 v-bind 指令。

<div v-bind:class="{'class1': class1}">    000000  </div>

条件语句

• v-if 指令根据表达式 seen 的布尔值来决定是否插入 p 元素。

<div id="app">    <p v-if="seen">现在你看到我了</p></div>

• 使用 v-show 指令来根据条件展示元素

<h1 v-show="ok">Hello!</h1>

• v-show 会在app初始化的时候编译并且渲染，当切换v-show模块时，只是简单的更改css。v-if 当切换v-if模块时，Vue.js 有一个局部编译/卸载过程

参数

• 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

<div id="app">    <pre><a v-bind:href="url">菜鸟教程</a></pre></div>   

• 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">    <p>{{ message }}</p>    <input v-model="message"></div>   

• v-on 指令，它用于监听 DOM 事件

 <a v-on:click="doSomething"></a>

• 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit"></form>

• 过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>

循环语句

• 循环使用 v-for 指令，v-for 可以绑定数据到数组来渲染一个列表

   <li v-for="i in sites">      {{ i.name }}   </li>  data: {    sites: [      { name: 'Runoob' },      { name: 'Google' },      { name: 'Taobao' }    ]  }

• v-for 可以通过一个对象的属性来迭代数据

 <li v-for="i in object">    {{ i }}  </li>  data: {    object: {      name: '菜鸟教程',      url: 'http://www.runoob.com',      slogan: '学的不仅是技术，更是梦想！'    } }//v-for共可以传三个参数：属性，键名，索引 <li v-for="(value, key, index) in object">     {{ index }}. {{ key }} : {{ value }}    </li>

• v-for 也可以循环整数

 <li v-for="n in 10">     {{ n }}    </li>