VUE手册

vue起步

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<!-- 引入vue.js依赖 -->
<script src="vue.min.js" ></script>
<!-- 自己定义的脚本 -->
<script type="text/javascript">
// 1、创建一个vue实例对象，
// 2、el：表示的是选择器，选择页面中的元素，#vue_det就是页面中元素的id，id为vue_det的dom对象
// 3、data：就是这个对象中携带的属性和方法（其中data属性的名称如果和自定义的属性冲突了，可以用在属性名称前面加$来区分，$data）
// 4、methods：用于定义函数
// 5、当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

一、创建对象

var vm = new Vue({
    // 选项
  })
  选项：
    el：id选择器
    data：数据
    methods：方法函数  

二、输出对象
{{data}}：直接用大括号就好

vue模板语法

插入值

1、文本

直接使用： {{}}

2、html
使用：v-html

    <div id="app">
        <div v-html="message"></div>
    </div>
        
    <script>
    new Vue({
    el: '#app',
    data: {
        message: '<h1>菜鸟教程</h1>'
    }
    })
    </script>

3、属性赋值

1. v-bind

    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>

2. 表达式

    <div id="app">
        <!-- 简单运算 -->
        {{5+5}}<br>
        <!-- 三目运算 -->
        {{ ok ? 'YES' : 'NO' }}<br>
        <!-- 函数调用？ -->
        {{ message.split('').reverse().join('') }}
        <!-- 字符运算 -->
        <div v-bind:id="'list-' + id">菜鸟教程</div>
    </div>
        
    <script>
    new Vue({
    el: '#app',
    data: {
        ok: true,
        message: 'RUNOOB',
        id : 1
    }
    })
    </script>

指令

指令是带有v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

根据seen的值来判断p标签的内容要不要展示出来，seen可以取true和false

参数

1. v-bind指令被用来响应地更新 HTML 属性：

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

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

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

用户输入

v-model指令来实现双向数据绑定

<input v-model="message">

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

this.message.split(’’).reverse().join(’’) 字符串反转

filters过滤器

1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

缩写

1. v-bind 缩写 ：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2. v-on 缩写 @

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

vue条件语句

v-if

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

v-if根据seen的值来判断p标签要不要显示

v-else

可以给v-if添加一个“else”块

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>

v-else-if

多级条件判断

v-show

根据条件展示元素

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

vue循环语句

1. v-for指令
   v-for 指令需要以 site in sites形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
   v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

2. 迭代对象

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

3. 迭代整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>