Vue常用指令及动态绑定属性

原创已于 2022-04-14 11:34:51 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-13 21:58:44 首次发布

Vue学习专栏收录该内容

36 篇文章

订阅专栏

Vue源码下载：

GitHub - vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.https://github.com/vuejs/vue

下载Tags最新版本（release版本）。

Vue生命周期函数

VSCode中自定义模板设置:文件 - > 首选项 - > 用户代码片段，打开html.json文件添加如下内容:

"Vue": {
		"prefix": "vue",
		"body": [
			"<div></div>",
			"<script>",
			"const app = new Vue({",
				"el:'#app',",
				"data:{",
					"}",
				"})",
			"</script>"
		]
	}

则在html文档中输入vue即可快速成如下内容：

<div></div>
  <script>
  const app = new Vue({
    el:'#app',
    data:{}
  })
  </script>

同理，在vue.json文件中可以对vue模板进行设置。

vue中的常用指令：

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
    <h2 v-html="url"></h2>
    <h2 v-text="message">Vue</h2>
    <h2 v-pre>{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊！',
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
  </script>

动态绑定属性：v-bind:

动态绑定class、src、href、style

<div id="app">
    <h2  class="title" :class="{active: isActive,line:isLine}">{{message}}</h2>
    <h2  class="title" :class="getClasses()">{{message}}</h2>
    <h2  class="title" :class="['active','line']">{{message}}</h2>
    <h2  :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
    <button v-on:click = "btnClick">状态切换</button>
    <ul>
      <li :class="{click:isClick}" v-for = "(item,index) in movies" @click="liClick">{{index}}-{{item}}</li>
    </ul>
    <a :href="aHref">斗罗大陆</a>
    <img v-bind:src="imgURL" sizes="10%">
  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'v-bind',
      imgURL:'https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20210218/16136418483037.jpg',
      aHref:'https://fantuan.tv/vodplay/132401-1-201.html',
      isActive:true,
      isLine:false,
      movies:['钢铁侠','绿巨人','美国队长','雷神','复仇者联盟'],
      isClick:true,
      finalSize:50,
      finalColor:'yellow'
    },
    methods:{
      btnClick(){
        if(this.isActive){
          this.isActive = false;
          this.isLine = true;
        }else{
          this.isActive = true;
          this.isLine = false;
        }
      },
      getClasses(){
        return {active: this.isActive, line: this.isLine};
      },
      liClick(){
        this.isClick = !this.isClick;
      }
    }
  })
  </script>

计算属性：一般应用于需要对基本数据进行处理之后再进行显示的场景。和methods相比，computed具有缓存功能，多次调用时，计算属性只需要执行一次。

  <div id="app">
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>总价格：{{totalPrice}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      firstName:'Lebron',
      lastName:'James',
      books:[
        {id:110,name:'book1',price:119},
        {id:111,name:'book2',price:89},
        {id:112,name:'book3',price:150},
        {id:113,name:'book4',price:146},
        {id:114,name:'book5',price:79}
      ]
    },
    computed:{
      fullName:function () {
        return this.firstName + ' ' + this.lastName;
      },
      totalPrice(){
        let result = 0;
        for(let book of this.books){
          result += book.price;
        }
        return result;
      }

    },

  })
  </script>