Vue的基本使用（一）

vue直接在页面中使用

（只需要下载vue.js, 使用script标签引入项目即可。）

<script src="./vue.js"></script>
<script type="text/javascript">
//这里创建一个vue实例
        new Vue({
        //使用el指定html中的模板
        //这里指定的是id为app的标签
        //在html中，#app的内容中，就可以使用vue的语法了
        el: '#app',
        //在data中可以定义需要使用的变量
        data: {
          show: true
          }
        })

1. 一些指令：

<!-- v-text用于向页面插入文本 -->
 <p v-text='msg'></p>
 <!-- v-html可以解析HTML片段，显示成HTML元素 -->
<div v-html='html'></div>
<!-- v-pre不编译 -->
<div v-pre>{{<h2>这里不进行vue编译,但是会解析HTML标签</h2>}}</div>
<div>
 <!-- 插值表达式中可以进行简单的运算、三元运算、使用Vue白名单内的全局变量，例如Math、Date -->
   <p>{{200/10}}</p>
   <p>{{flag?'是true':'是false'}}</p>
   <p>{{text.split(',').reverse().join(',')}}</p>
</div>
<!-- v-show在条件为真时渲染，条件为假时添加'display:none' -->
<!-- v-if适合于条件不经常改变的场景，因为ta的切换开销大 -->
<!-- v-show适合于条件经常切换的场景 -->
<template v-if="type === 'name'">
   <label key="name-label">用户名：</label>
   <!-- v-model用来将数据双向绑定 -->
   <input type="text" placeholder="输入用户名：" v-model='username'>
</template>

<template v-else>
  <label key="mail-label">邮箱：</label>
  <input type="text" placeholder="输入邮箱：" v-model='email'>
</template>
<button @click='toggleClick'>切换输入框</button>
<template v-show='flag'>
  <p>当flag为true时显示</p>
</template>

<!-- 列表渲染v-for用于遍历数组或者对象 -->
<!-- of / in 都可以 -->
<span v-for='value in score'>{{value }}+' '</span>
<ul>
  <li v-for='(book,index) in books'>{{index+'-'+book.bookname}}</li>
</ul>
<ul>
  <li v-for='(book,index) of books'>{{index+'-'+book.bookname}}</li>
</ul>
<ul>
  <!-- value,key,index的顺序时固定的，不能乱 -->
  <li v-for='(value,key,index) in student'>{{index}}-{{key}}:{{value}}</li>
</ul>
<!-- v-for可以迭代整数 -->
<!-- 输出1 2 3 4 5 6 7 8 9 10 -->
<span v-for='i in 10'>{{i}}</span>

事件绑定：v-on：可简写为 @

html中：

<button @click='addBook'>添加一本书</button>

script标签中：

new Vue({
  el: '#app',
  data: {
     show: true
  },
  methods: {
     addBook: function () {
    // 添加到数组(从尾部添加元素) 
    // this.books.push({
    //     bookname: '《css》',
    //     author: 'lea'
  // });
    // 添加到数组(往头部索引0添加元素) 
    this.books.unshift({
       bookname: '《css》',
       author: 'lea'
     });
   }
})

事件可以添加事件修饰符、按键修饰符

<!-- 阻止单击事件冒泡 -->
<a @:click.stop="doThis"></a>
<!-- 取消提交事件的默认行为 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 按键修饰符 .enter 表示在按下enter键才触发handleEnter事件：-->
<input type="text" placeholder="输入用户名：" v-model='username' @keyup.enter="handleEnter">

vue 提供的按键修饰符有：
.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right
没有修饰符的可以使用.按键的keyCode来定义按键事件

<!-- 当按下keyCode为13的按键，键盘弹起时触发submit事件 -->
<input @keyup.13="submit">

计算属性：computed

1. 计算属性有缓存的功能，当它依赖的数据没有发生变化，再次获取它的值，不会重新计算，而是直接在缓存中获取，提高了执行性能。
2. 在计算属性所使用（依赖）的变量发生改变的时候，计算属性的值会自动重新计算并更新到页面。

<div id="example">
  // 显示原message信息:
  <p>Original message: "{{ message }}"</p>
  // 显示翻转后的message信息：
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

//计算属性的定义方法
var vm = new Vue({  
el: '#example',  
data: {    
    message: 'Hello'
  },  
computed: {
    reversedMessage: function () {      
       // `this` 指向 vm 实例
       return this.message.split('').reverse().join('')
    }
  }
})

过滤器：filters

用于对显示在页面的数据进行处理，例如日期格式化等。

<div>
   <!-- 过滤器的使用 -->
   <p>{{date}}</p>
   <p>{{date| formatDate}}</p>
</div>

// 在method同级书写filters 函数
filters: {
  formatDate: function (value) {
    var date = new Date(value);
    var year = date.getFullYear();
    var month = padDate(date.getMonth() + 1);
    var day = padDate(date.getDate());
    var hours = padDate(date.getHours());
    var minutes = padDate(date.getMinutes());
    var seconds = padDate(date.getSeconds());
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  }
}

页面显示：第一行是未过滤，第二行是过滤后的效果

动画的简单使用

html中：

<!-- 动画的使用： -->
<button @click="show = !show">Toggle show</button>
<!-- 要变化的部分需要使用transition进行包裹，并命名 -->
<transition name="xxx">
  <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, atlacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>

css中定义变化的样式：
XXX是html中transition标签的命名（name属性值）

/* 定义进入过渡生效时的状态。*/
        .xxx-enter-active {
            animation: bounce-in .5s;
        }
/* 定义离开过渡生效时的状态。*/
        .xxx-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }

javascript中：
data中定义控制p 显示与否的变量

data: {
   show: true
}