vue.js学习笔记--基本语法

系统管理员 2021-03-25 14:20 632阅读 0赞

### 文章目录 ###

*   *   *  一、插值操作：
         *   *   *  1. mustache语法
                 *  2. v-once
                 *  3. v-html
                 *  4. v-text
                 *  5. v-pre
                 *  6. v-cloak
         *  二、绑定属性（v-bind）：
         *   *   *  1.基本使用
                 *  2.v-bind动态绑定class
                 *  3.v-bind动态绑定style
         *  三、计算属性：
         *   *   *  1.基本使用
                 *  2.计算属性和methods的对比
                 *  3. 补充：ES6对象字面量增强写法
         *  四、事件监听：
         *  五、条件判断：
         *  六、循环遍历：
         *   *   *  1. 遍历数组
                 *  2. 遍历对象
                 *  3. 组件的key属性
                 *  4. 常用响应式修改数组内容的方法
         *  七、双向绑定：
         *   *   *  1.v-model原理
                 *  2.v-model结合radio使用
                 *  3.v-model结合checkbox使用
                 *  4.v-model结合select使用
                 *  5.值绑定
                 *  6.修饰符

### 一、插值操作： ###

##### 1. mustache语法 #####

<div id="app">
        <p>{
       {message}} , world !</p>
        <p>{
       {firstname + ' ' + lastname}}</p>
        <p>{
       {firstname}}  {
       {lastname}}</p>
        <p>{
       {num * 2}}</p>
        <p>{
       {num == 5 ? 'num等于5' : 'num不等于5'}}</p>
      </div>
    
      <script> var vm = new Vue({ el: '#app', data:{ message: 'hello', firstname: 'kobe', lastname: 'bryant', num : 5 } }) </script>

##### 2. v-once #####

某些特殊情况下，我们可能不希望界面随意的改变，这个时候可以使用`v-once`指令

*  该指令后面不需要任何表达式
 *  该指令表示元素和组件只渲染一次，不会随数据的改变而改变  
    ![在这里插入图片描述][20190801163914366.png]

##### 3. v-html #####

某些情况下，我们从服务器请求到的数据本身就是一个html代码。如果我们直接使用\{ \{\}\}来输出，会将html代码一起输出，但如果我们希望是按照html格式进行解析，并显示对应的内容，可以使用该指令，将html字符串解析之后进行显示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODM4NjQz_size_16_color_FFFFFF_t_70]

##### 4. v-text #####

作用和mustache比较相似，都是将数据显示在界面上，但是使用起来不够灵活

<p>{
       {message}},world</p>
        <p v-text="message">,world</p>

##### 5. v-pre #####

用于跳过这个元素和它子元素的编译过程，用于显示原来的mustache语法

<p>{
       {message}}</p>
        <p v-pre>{
       {message}}</p>

##### 6. v-cloak #####

某些情况下，比如网络比较慢的时候，在未执行到js代码的时候，\{ \{\}\}不会显示具体的值而是将表达式显示出来。为了提高用户体验，可以使用该标签设置vue解析之前和之后的不同样式。这样的话，在vue解析之前，标签有一个属性v-cloak，解析之后，则没有该属性。

### 二、绑定属性（v-bind）： ###

##### 1.基本使用 #####

前面的指令都是将值插入到模板的内容中，而当标签的属性需要动态决定时，可以使用v-bind指令进行绑定。比如a标签的href属性、img的src属性等

##### 2.v-bind动态绑定class #####

class后面跟的是一个对象，格式为`:class="{key(类名):value(布尔值)}"`，可以和普通的class同时存在；如果过于复杂，可以放在一个methods或者computed中

<div id="app">
        <p :class="{red:isRed, yellow:isYellow}">hello</p>
        <button @click="change">change</button>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { isRed: true, isYellow: false }, methods: { change: function () { this.isRed = !this.isRed this.isYellow = !this.isYellow } } }) </script>

##### 3.v-bind动态绑定style #####

可以使用v-bind来绑定一些css内联样式实现动态改变样式，格式为`:style="{key(css属性名):value(属性值)}"`

<div id="app">
        <p :style="{ fontSize: fs}">hello</p>
      </div>
    
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            fs: '20px'
          }
        })

### 三、计算属性： ###

在模板中我们可以直接通过插值语法显示data中的数据，但是在某些情况下，我们可能需要对数据进行一些转化或者将多个数据结合起来再显示，这个时候我们可以使用计算属性。

##### 1.基本使用 #####

<div id="app">
        <p>总价格：{
       {totalPrice}}</p>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { books:[ { id:1,name:'java从入门到放弃',price:80}, { id:2,name:'c语言从入门到放弃',price:90}, { id:3,name:'c++从入门到放弃',price:100}, ] }, computed: { totalPrice:function(){ let res = 0 for(book of this.books) res += book.price return res } }, }) </script>

##### 2.计算属性和methods的对比 #####

*  计算属性会将计算的值进行缓存，当值不变的情况下，多次调用，计算属性只会调用一次，而methods会调用多次，浪费性能。
 *  计算属性必须返回一个值，页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

##### 3. 补充：ES6对象字面量增强写法 #####

（1）属性的简写：

let name = 'nic'
        let age = 22
        
        //ES6之前
        let obj = { 
          name: name,
          age: age
        }
        
        //ES6之后
        let obj = { 
          name,
          age
        }

（2）方法的简写：

//ES6之前
        let obj = { 
          run:function(){ 
            console.log('run')
          }
        }
        
        //ES6之后
        let obj = { 
          run(){ 
            console.log('run')
          }
        }

### 四、事件监听： ###

在前端开发中，我们经常用到交互，这个时候我们需要监听点击、拖拽、键盘等事件。在vue中我们通常使用`v-on`指令进行事件的监听。

**当通过methods中定义方法，以供@click调用时，需要注意参数问题：**

*  如果该方法不需要额外参数，那么方法后的()可以不加。
 *  如果省略了()，但是定义方法时本身有一个参数，默认会将原生事件event参数传递进去。
 *  如果需要传入某个参数，同时需要event时，可以将`$event`作为参数传递进去

**v-on修饰符：**

<button @click.stop="dothis"></button>
    
        
        <button @click.prevent="dothis"></button>
    
        
        <button @keyup.enter="dothis"></button>
        
        <button @click.13="dothis"></button>
    
        
        <button @click.once="dothis"></button>
    
        
        <button @click.stop.prevent="dothis"></button>

### 五、条件判断： ###

这种情况使用计算属性更合适

v-show的用法和v-if非常相似，也决定一个元素是否渲染：

*  v-if当条件为false时，压根不会有对应的元素在DOM中
 *  v-show当条件为false时，仅仅是将元素的display属性设置为none而已  
    开发中如何选择呢？
 *  当需要在显示和隐藏之间频繁切换时，使用v-show
 *  当只有一次切换时，通常使用v-if

### 六、循环遍历： ###

##### 1. 遍历数组 #####

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

##### 2. 遍历对象 #####

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

##### 3. 组件的key属性 #####

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个`:key` 属性，来给每一个节点做一个唯一标识，以此来更加高效地更新虚拟DOM。

##### 4. 常用响应式修改数组内容的方法 #####

this.movies.push('eee')
        this.movies.push('eee','fff','ggg')
        
        
        this.movies.pop()
        
        
        this.movies.shift()
        
        
        this.movies.unshift('eee')
        this.movies.unshift('eee','fff','ggg')
        
        
        
        this.movies.splice(start,num)
        
        this.movies.splice(start,0,'eee','fff')
        
        this.movies.splice(start,num,'eee','fff')
        
        
        this.movies.sort()
        
        
        this.movies.reverse()
    
        
        this.movies[0]='eee'

### 七、双向绑定： ###

##### 1.v-model原理 #####

vue中使用v-model指令来实现表单元素和数据的双向绑定，它的背后本质上包含两个操作：

*  v-bind绑定一个value属性
 *  v-on指令给当前元素绑定input事件  
    `<input type="text" v-model="message">`  
    等同于  
    `<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">`

##### 2.v-model结合radio使用 #####

<div id="app">
        <label for="male">
          <input type="radio" name="sex" id="male" v-model="sex" value="男"> 男
        </label>
        <label for="female">
          <input type="radio" name="sex" id="female" v-model="sex" value="女"> 女
        </label>
        <h5>您选择的性别是：{
       {sex}}</h5>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { sex: '男' } }) </script>

##### 3.v-model结合checkbox使用 #####

**check单选框**

<div id="app">
        <label for="agree">
          <input type="checkbox" name="agree" id="agree" v-model="isAgree">
          同意协议
        </label>
        <h5>是否同意协议：{
       {isAgree}}</h5>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { isAgree: false } }) </script>

**check多选框**

<div id="app">
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="排球" v-model="hobbies">排球
        <h5>您的选择是：{
       {hobbies}}</h5>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { hobbies: [] } }) </script>

##### 4.v-model结合select使用 #####

<div id="app">
        <select name="hobbies" id="hobbies" v-model="hobbies">
          <option value="篮球">篮球</option>
          <option value="足球">足球</option>
          <option value="排球">排球</option>
        </select>
        <h5>您的选择是：{
       {hobbies}}</h5>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { hobbies:'篮球' } }) </script>

##### 5.值绑定 #####

有些时候，供选择的选项可能是从服务器请求到的，这个时候需要动态生成选项，并给value赋值。

<div id="app">
        <label :for="item" v-for="item in origin">
          <input type="checkbox" :value="item" :id="item" v-model="hobbies">{
       {item}}
        </label>
        <h5>您的选择是：{
       {hobbies}}</h5>
      </div>
    
      <script> const vm = new Vue({ el: '#app', data: { origin:['篮球','足球','排球','乒乓球'], hobbies:[] } }) </script>

##### 6.修饰符 #####

**lazy修饰符：**

*  默认情况下，v-model默认是在input事件中同步输入框的数据的，也就是说，一旦数据发生改变，对应的data中的数据就会自动发生改变
 *  lazy修饰符可以让数据在失去焦点或者回车时才更新

**number修饰符：**

*  默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理，但是如果我们希望处理的是数字类型，那么最好直接将内容当作数字处理
 *  number修饰符可以让输入框输入的内容自动转成数字类型

**trim修饰符：**  
如果输入的内容首尾有很多空格，我们可以使用trim修饰符过滤内容左右两边的空格

[20190801163914366.png]: /images/20210325/1616682006710.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODM4NjQz_size_16_color_FFFFFF_t_70]: /images/20210325/1616681986248.png