Vue初体验——快速入门

一. Vue基础语法

1. 插值操作

• v-once: 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。并且该指令后面不需要跟任何表达式。

<h2 v-once>{
  {message}}</h2>

• v-html: 按照HTML格式解析，指令后面往往会跟上一个string类型。

<h2 v-html="link"></h2>

• v-text: 该作用和Mustache比较相似，都是将数据显示在界面中。不过v-text不会因为网络慢的原因，界面上出现未编译的Mustache标签。
  v-text通常接受一个string类型。

<h2 v-text="message"></h2>
<h2>{
  {message}}</h2>

• v-pre: 用于显示原本的Mustach语法，有点类似于转义符。
  <h2 v-pre>{ {message}}</h2>该语句会照原样显示，不会替换message中的值。

2. 绑定属性

• v-bind: 用于绑定一个或多个属性值，或向另一个组件传递props值。可以将data中的值进行动态绑定。语法糖：直接写:代替v-bind:

<div id="app">
  <img v-bind:src="imageURL" alt="">
  <!-- 语法糖的写法 -->
  <img :src="imageURL" alt="">
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
  const app = new Vue({
    
    el: '#app',
    data: {
    
      imageURL: 'https://cn.vuejs.org/images/logo.png',
    }
  })
</script>

• v-bind绑定class,一般使用对象语法。例子中：isActice, isLine一般是在data中定义为true或false。

<h2 :class="{
    'active': isActive, 'line': isLine}">Hello World</h2>

• v-bind绑定class，一般使用对象语法。

<!--<h2 :style="{key(属性名)：value(属性值)}">{
   {message}}</h2>-->
<!--对象value可以是具体赋的值，也可以是data中的属性 -->
<!-- '50px'必须加上单引号，否则是当做一个变量去解析-->
<h2 :style="{
      fontSize:'50px'}">{
  {message}}</h2>

3. 计算属性

• 计算属性：一般用于对data中的一些数据进行转化后再显示。

<div id="app">
  <h2>{
  {fullName}}</h2>
</div>
<script src="../../js/vue-2.4.0.js"></script>
<script>
  const app = new Vue({
    
    el: '#app',
    data: {
    
      firstName: 'Lebron',
      lastName: 'James'
    },
    //computed：计算属性()
    computed:{
    
      fullName() {
    
        return this.firstName+' '+this.lastName;
      }
    }
  })
</script>

• 每个计算属性包含一个getter和一个setter，某些情况下可以提供setter方法(不常用)。当不写getter和setter方法时，默认是getter()方法，并且在调用的时候可以不写小括号，如上面这个例子。
• computed与methods比较：computed会进行缓存，如果多次使用时，只会调用一次。而methods则是使用几次，调用几次。

4. 事件监听

• v-on绑定事件监听器，语法糖:@代替v-on:

<button @click="increment">+</button>
<script>
  const app = new Vue({
    
    el: '#app',
    data: {
    
      counter: 0,
    },
    methods: {
    
      increment(){
    
        this.counter++;
      }
    }
  })
</script>

• v-on参数

  • 如果该方法不需要参数，那么方法中的()可以不添加。
  • 如果该方法需要一个参数，调用方法时不加()则会将原生事件event参数传递进去。
  • 如果需要传递event，可以通过$event传入。

• v-on修饰符:

  • .stop - 调用event.$stopProgation()
  • .prevent - 调用event.$preventDefault()
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
  • .native - 监听组件根元素的原生事件
  • .once - 只触发一次回调

5. 条件和循环

• v-if,v-else-if,v-else与条件语句if、else、else if类似

<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

• v-show的用法和v-if非常相似，用法也一样。不同的是：

  • v-if当条件为false时，压根不会有对应的元素在DOM中。
  • v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
  • 当只有一次切换时，使用v-if,频繁切换时使用v-show。

• v-for类似于for循环，格式如item in items形式。

  • 遍历数组：

  <ul>
      <li v-for="(item,index) in names">
        {
      {index+1}}.{
      {item}}
      </li>
  </ul>
  

  • 遍历对象：

  <ul>
      <li v-for="(value,key,index) in info">{
      {value}}-{
      {key}}-{
      {index}}</li>
  </ul>
  

• **组件的key属性：**官方推荐我们在使用v-for时，给对应的元素或组件添加一个:key属性，作用主要是为了高效的更新虚拟DOM。

<ul>
    <li v-for="(item,index) in letters" :key="index">{
  {item}}</li>
</ul>

• 数组中的这些方法是响应式的：
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

6. 表单绑定

• Vue中使用v-model指令来实现表单元素和数据的双向绑定。意思是：当input中v-model绑定了message，会实时将输入的内容传递给message，message发生变化。

<!--v-model双向绑定-->
<input type="text" v-model="message">
<h2>{
  {message}}</h2>
<script src="../../js/vue-2.4.0.js"></script