Vue基本语法

最新推荐文章于 2022-04-17 15:51:35 发布

流年笑掷丨

最新推荐文章于 2022-04-17 15:51:35 发布

阅读量91

点赞数

分类专栏：理论与基础文章标签： vue.js

本文链接：https://blog.csdn.net/zuoboqiao/article/details/109130105

版权

理论与基础专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1.基本语法

实例

<div id="app">
  <h2>{{message}}</h2>
</div>

const app = new Vue({
    el:'#app',
    data:{
       message:'你好啊'
     }
 })

1.1. v-for 遍历

<li v-for="item in movies">{{item}}</li>

  data:{
   movies:['猩球崛起','盗梦空间','大话西游','速度与激情']
   }

1.2. 插值的操作

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

const app = new Vue({
    el:'#app',
    data:{
       message:'你好啊',
       url: '<a href="http://www.baidu.com">百度一下</a>',
        
     }
 })

1.3. v-bind 事件绑定（语法糖：：）

语法：

基本使用：

<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>

  data: {
    imgURL:'https://img11.360buyi.webp',
    aHref: 'http://www.baidu.com'
  }

动态绑定class（对象语法）

// 语法：<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>

  data: {
      message: '你好啊',
      isActive: true,
      isLine: true
    },
  methods: {
    btnClick: function () {
      this.isActive = !this.isActive
    },
    getClasses: function () {
      return {active: this.isActive, line: this.isLine}
    }
  }

动态绑定style（对象语法）

// 语法：<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>

  data: {
    message: '你好啊',
    finalSize: 100,
    finalColor: 'red',
  },
  methods: {
    getStyles: function () {
      return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
    }
  }

1.4. v-on 事件监听（语法糖： @）

语法：<button @click=“btn2Click”>按钮2

基本使用

<h2>{{counter}}</h2>
<button v-on:click="increment">+</button>
<button @click="decrement">-</button>

  data: {
      counter: 0
    },
  methods: {
    increment() {
      this.counter++
    },
    decrement() {
      this.counter--
    }
  }

v-on 的修饰符

  <!--1. .stop修饰符的使用  阻止事件冒泡-->
  <div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
  </div>
  <!--2. .prevent修饰符的使用  阻止默认响应-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  <!--3. .监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">
  <!--4. .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>

  methods: {
    btnClick() {
      console.log("btnClick");
    },
    divClick() {
      console.log("divClick");
    },
    submitClick() {
        console.log('submitClick');
      },
    keyUp() {
      console.log('keyUp');
    },
    btn2Click() {
      console.log('btn2Click');
    }
  }

1.5. 条件判断

v-if 的使用

<h2 v-if="isShow">{{message}}</h2>

  data: {
    message: '你好',
    isShow: true
  }

v-if 和 v-else 的使用

<h2 v-if="isShow">{{message}}</h2>
<h1 v-else>isShow为false时，显示我</h1>

  data: {
    message: '你好',
    isShow: true
  }

v-show 的使用

<!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>

<!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none-->
<h2 v-show="isShow" id="bbb">{{message}}</h2>

  data: {
    message: '你好啊',
    isShow: true
  }

1.6. 循环遍历

v-for遍历数组

<!-- 1.在遍历的过程中，没有使用索引值（下标值） -->
li v-for="item in names">{{item}}</li>
<!-- 2.在遍历的过程中，获取索引值 -->
<li v-for="(item,index) in names">{{index+1}}.{{item}}</li>

  data: {
    names: ['Joe','Kobe','James','Curry']
  }

v-for遍历对象

<!-- 1.在遍历对象过程中，如果只是获取一个值，那么获取到的就是value -->
<li v-for="item in info">{{item}}</li>
<!-- 2.获取key和value  格式：(value,key) -->
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
<!-- 3.获取key和value和index  格式：(value,key,index) -->
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>

  data: {
    info: {
      name: 'Joe',
      age: 18,
      height: 1.88
    }
  }

v-for使用过程添加key

<li v-for="item in letters" :key="item">{{item}}</li>

  data: {
    letters: ['A', 'B', 'C', 'D', 'E']
  }

1.6.1 多重循环遍历方法

data: {
  books: [
    {
      id: 1,
      name: '《算法导论》',
      date: '2006-9',
      price: 85.00,
      count: 1
    },
    {
      id: 2,
      name: '《编程艺术》',
      date: '2006-2',
      price: 59.00,
      count: 1
    }
},
computed: {
  totalPrice() {
    // 1.普通的for循环
    let totalPrice = 0
    for (let i = 0; i < this.books.length; i++) {
      totalPrice += this.books[i].price * this.books[i].count
    }
    return totalPrice

    // 2.for (let i in this.books)    ES6
    let totalPrice = 0
    for (let i in this.books) {
      const book = this.books[i]
      totalPrice += book.price * book.count
    }  
    return totalPrice
      
    // 3.for (let i of this.books)
    let totalPrice = 0
    for (let item of this.books) {
      totalPrice += item.price * item.count
    }
    return totalPrice

    // 4.reduce
    return this.books.reduce(function (preValue, book) {
      return preValue + book.price * book.count
    }, 0)
  }
}

1.7. v-model

基本使用

<input type="text" v-model="message">
{{message}}

data: {
  message: '你好'
}

v-model结合radio类型

<label for="female">
  <input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是: {{sex}}</h2>

data: {
  sex: '女'
}

v-model结合checkbox类型

<!--1.checkbox单选框-->
<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree">同意协议
</label>
<h2>您选择的是: {{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>

<!--2.checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<h2>您的爱好是: {{hobbies}}</h2>
<hr>
<label v-for="item in originHobbies" :for="item">
  <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>

data: {
  isAgree: false, // 单选框
  hobbies: [], // 多选框,
  originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球']
}

v-model结合select类型

<!--1.选择一个-->
<select name="abc" v-model="fruit">
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
</select>
<h2>您选择的水果是: {{fruit}}</h2>

<!--2.选择多个-->
<select name="abc" v-model="fruits" multiple>
  <option value="苹果">苹果</option>
  <option value="香蕉">香蕉</option>
</select>
<h2>您选择的水果是: {{fruits}}</h2>

data: {
  fruit: '香蕉',
  fruits: []
}

v-model修饰符

<!--1.修饰符: lazy  失去焦点或敲回车键时才会更新-->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>

<!--2.修饰符: number-->
<!-- 默认区情况下，在输入框中无论输入的是字母还是数字，都会默认被当做是字符串类型进行处理 -->
<!-- number修饰符可以让输入框中输入的内容自动转换成数字类型 -->
<input type="number" v-model.number="age">
<h2>{{age}}-{{typeof age}}</h2>

<!--3.修饰符: trim  过滤内容左右两边的空格-->
<input type="text" v-model.trim="name">
<h2>您输入的名字:{{name}}</h2>

data: {
  age: 0,
  name: ''
}

2.组件

2.1. 组件的基本使用

<div id="app">
  <!--3.使用组件-->
  <cpn></cpn>
  <cpn></cpn>
</div>

// 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈哈</p>
        <p>我是内容，呵呵呵呵</p>
      </div>`
  })

  // 2.注册组件  cpn是使用组件时的标签名，cpnC是创建组件构造器的名字
  Vue.component('cpn' , cpnC)

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })

2.2. 全局组件和局部组件

// 1.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)
Vue.component('cpn', cpnC)

// 2.局部组件，只能在这个 #app 实例中使用
const app = new Vue({
  el: '#app',
  components: {
    cpn: cpnC  // cpn使用组件时的标签名，cpnC是创建组件构造器的名字
  }
})

2.3. 父组件和子组件

// 2.创建组件构造器(父组件)
const cpnC2 = Vue.extend({
template: `
  <div>
  <h2>我是标题2</h2>
  <cpn1></cpn1>
  </div>`,
components: {
  cpn1: cpnC1    // 子组件
  }
})

2.4. 组件的语法糖注册

// 1.注册组件与创建组件构造器合并在一起  全局注册
Vue.component('cpn1', {
template: `
<div>
<h2>我是标题1</h2>
</div>`
})

// 2.注册局部组件的语法糖
const app = new Vue({
  el: '#app',
  components: {
    'cpn2': {
      template: `
        <div>
          <h2>我是标题2</h2>
        </div>`
    }
  }
})

2.5. 组件模板分离

<!--1.script标签, 注意:类型必须是text/x-template-->
<script type="text/x-template" id="cpn">
<div>
  <h2>我是标题</h2>
</div>
</script>

<!--2.template标签-->    // 推荐使用，简便
<template id="cpn">
  <div>
    <h2>我是标题</h2>
  </div>
</template>

// 1.注册一个全局组件
Vue.component('cpn', {
  template: '#cpn'
})

const app = new Vue({
  el: '#app',
  data: {
    message: '你好啊'
  }
})

2.6. 组件中的数据存放

<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容,呵呵呵</p>
  </div>
</template>

// 1.注册一个全局组件
Vue.component('cpn', {
  template: '#cpn',
  data() {
    return {
      title: 'abc'
    }
  }
})

const app = new Vue({
  el: '#app'
})

组件的data为什么是函数？

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

2.7. 组件通信-父组件向子组件传递数据

<!-- 父组件模板 -->
<div id="app">
<cpn :cmessage="message" :cmovies="movies"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{item}}</li>
    </ul>
    <h2>{{cmessage}}</h2>
  </div>
</template>

// 父传子: props
  const cpn = {    // 子组件
    template: '#cpn',
    // props: ['cmovies', 'cmessage'],
    props: {
      // 1.类型限制
      // cmovies: Array,
      // cmessage: String,

      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,
        default: 'aaaaaaaa',
        required: true
      },
      // 类型是对象或者数组时, 默认值必须是一个函数
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
    }
  }
  
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies: ['海王', '海贼王', '海尔兄弟']
    },
    components: {
      cpn      // 父组件
    }
  })

2.8. 组件通信-子组件向父组件传递数据

<!--父组件模板-->
<div id="app">
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories"
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

// 1.子组件
const cpn = {
  template: '#cpn',
  data() {
    return {
      categories: [
        {id: 'aaa', name: '热门推荐'},
        {id: 'bbb', name: '手机数码'},
        {id: 'ccc', name: '家用家电'}
      ]
    }
  },
  methods: {
    btnClick(item) {
      // 发射事件: 自定义事件
      this.$emit('item-click', item)
    }
  }
}

// 2.父组件
const app = new Vue({
  el: '#app',
  data: {
    message: '你好啊'
  },
  components: {
    cpn    // ES6 增强字面量
  },
  methods: {
    cpnClick(item) {
      console.log('cpnClick', item);
    }
  }
})