Vue2 学习记录--语法部分

学习资源--Vue2官网

Vue2停更后，发现官网原来的学习路径变成英文了，所以找到了中文简介进行学习：

简介 | Vue.js https://cn.vuejs.org/guide/introduction

一、模板语法

1.1 文本插值、html插值、属性和使用限制

在about组件中写测试代码。不废话，直接上代码。

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ msg }}
    <div v-html="htmTxt"></div>
    <div v-bind:id="id" >百度</div>
    <div :id="id" >百度</div>
    <p>{{ count + 1 }}</p>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      msg: '<h2>静态文本</h2>',
      htmTxt:'<h2>静态文本</h2>',
      id: '1234',
      attr: 'test-id',
      count: 0,
    }
  },  
  components: {     
  }
}
</script>

使用限制：

1、插值仅限于表达式。

2、关于缩写，当属性和属性名称相同时，比如 属性id，属性名称id，可以写成 :id, Vue2不支持。

1.2 简单的事件，用于测试语法

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ msg }}
    <div v-html="htmTxt"></div>
    <div v-bind:id="id" >百度1</div>
    <div :id="id" >百度2</div>
    <div :testid = "testid">动态属性绑定</div>
    <p>{{ count + 1 }}</p>
    <p @click="myclick()">事件测试</p>
  </div>
</template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
      msg: '<h2>静态文本</h2>',
      htmTxt:'<h2>静态文本</h2>',
      id: '1234',
      testid: 'testid',
      count: 0,
    }
  },  
  methods: 
  {
     myclick() {
      this.count += 1;
      console.log('点击事件');
    var s = document.getElementById("1234").innerHTML;
    alert(s)
     }

  },
  components: {     
  }
}
</script>

1.3 指令：v-if、v-else、v-show

使用这几个指令控制dom显示，代码:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{ msg }}
    <div v-html="htmTxt"></div>
    <div v-bind:id="id" >百度1</div>
    <div :id="id" >百度2</div>
    <div :testid = "testid">动态属性绑定</div>
    <p>{{ count + 1 }}</p>
    <p @click="myclick()">控制Dom显示</p>
    <div v-if="count % 2 == 0">count是偶数</div>
    <div v-else>count是奇数</div>
    <div v-show="count % 2 == 0">v-show:count是偶数时显示</div>
  </div>
</template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
      msg: '<h2>静态文本</h2>',
      htmTxt:'<h2>静态文本</h2>',
      id: '1234',
      testid: 'testid',
      count: 0,
    }
  },  
  methods: 
  {
     myclick() {
      
      console.log('点击事件');
      var s = document.getElementById("1234").innerHTML;
      alert(s)
      this.count += 1;
     }

  },
  components: {     
  }
}
</script>

心得：

1、v-if 和 v-show都实现了dom元素的渲染控制，他们的差别是：v-if 是真正控制了dom内容的输出，即dom中有就显示没有就不显示；而v-show是通过display:none来控制元素的显示的。

2、<div v-if>模块如果使用 <template v-if >来替换，可以消除本身模块在dom中的占位。

1.4 指令：v-for

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ul>
      <li v-for="student in students" :key="student.idx">
        {{ student.idx }} - {{ student.name }} - {{ student.age }}岁
      </li>
    </ul>
  </div>
</template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
    
      students: [
        {idx:'1', name: '张三', age: 18 },
        {idx:'2', name: '李四', age: 19 },
        {idx:'3', name: '王五', age: 20 }
      ]
    }
  },  
 
  components: {     
  }
}
</script>

1.5 指令 v-mode

绑定表单数据。

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ul>
      <li v-for="student in students" :key="student.idx">
        {{ student.idx }} - {{ student.name }} - {{ student.age }}岁
      </li>
    </ul>
    <button @click="$router.push('/')">Go to Home</button>
    <input type="text" v-model.lazy="students[0].name" placeholder="修改第一个学生的名字"/> 
    <input type="number" v-model.number="students[0].age" placeholder="修改第一个学生的年龄"/>
    <div>
      <span>第一个学生的信息：</span>
      <span>{{ students[0].idx }} - {{ students[0].name }} - {{ students[0].age }}岁</span>
    </div>
    <button @click="students.push({idx: students.length + 1 + '', name: '新学生', age: 18})">添加新学生</button>
  </div>
</template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
    
      students: [
        {idx:'1', name: '张三', age: 18 },
        {idx:'2', name: '李四', age: 19 },
        {idx:'3', name: '王五', age: 20 }
      ]
    }
  },  
  methods: {

  },
  components: {     
  }
}
</script>

心得：

1、v-mode与绑定的数据是同步更新的。为了让数据在事件后更新，使用v-mode.lazy。

2、修饰符有三个：.lazy、number、trim。

1.6 方法（methods）、计算属性（computed）和侦听器（watch）

<template>
  <div class="about">
    <h1>This is an about page</h1>
      
    <h3>价格计算</h3>
    单价：<input type="number" v-model.number="price" placeholder="输入价格"/> 
数量：<input type="number" v-model.number="quantity" placeholder="输入数量"/>
<button @click="price = 1; quantity = 1;">reset</button>
    <div>
      <span>总价：</span>
      <span>函数计算：{{ getSum()}}</span> <span>计算属性{{ calcSum }}</span>
    </div>
  </div>
 </template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
      price: 1,
      quantity: 1,
    }
  },  
  methods: {
     getSum() {
      return this.price * this.quantity;
    }

  },
  computed: {
    calcSum() {
      return this.price * this.quantity;
    } 
    
  },
  watch: {
    price(newVal, oldVal) {
      console.log(`price changed from ${oldVal} to ${newVal}`);
    },
    
  },  
  components: {     
  }
}
</script>

心得：

1、插值表达式、函数计算和计算属性都可以。计算属性的优点：当数据没有发生变化时，不会重新计算。

1.7 v-bind 之 class与style绑定

<template>
  <div class="about">
    <h1>This is an about page</h1>
      
    <h3>价格计算</h3>
    单价：<input type="number" v-model.number="price" placeholder="输入价格"/> 
数量：<input type="number" v-model.number="quantity" placeholder="输入数量"/>
<button @click="price = 1; quantity = 1;">reset</button>
    <div>
      <span>总价：</span>
      <span>函数计算：{{ getSum()}}</span> <span>计算属性{{ calcSum }}</span>
    </div>

    <div><span>绑定样式</span><br/> 
      <div :class="{ active: price > 5 }">
        价格大于5元时显示红色，否则显示绿色
      </div>
    </div>
  </div>

 </template>

<script>
export default 
{
  name: 'HomeView',
  data() {
    return {
      active: 'active',
      price: 1,
      quantity: 1,
    }
  },  
  methods: {
     getSum() {
      return this.price * this.quantity;
    }

  },
  computed: {
    calcSum() {
      return this.price * this.quantity;
    } 
    
  },
  watch: {
    price(newVal, oldVal) {
      console.log(`price changed from ${oldVal} to ${newVal}`);
    },
    
  },  
  components: {     
  }
}
</script>

心得：

可以绑定对象、数组、数组对象。