VUE笔记（一）

最新推荐文章于 2022-08-09 17:37:07 发布

一叶、

最新推荐文章于 2022-08-09 17:37:07 发布

阅读量254

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43376132/article/details/105475790

版权

1.VUE初始化

  <div id='app'>
   {{a}}
  </div>
  <script src='../vender/vue.min.js'></script>
  <script>
   import a from './hhh.js'
   const app = new Vue({
    el: '#app',
    data: {
     message: a
    }
   })
  </script>

2.v-bind使用

v-bind用于绑定数据和元素，v-bind可写成：

2.1v-bind基本使用

div部分

 <div id='app'>
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!--vue省略写法-->
  <img :src="imgUrl" alt="">
  <a :href="aHref">百度一下</a>
  <!--v-bind省略写法就是：-->
 </div>

script部分

<script src="../vender/vue.min.js"></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    imgUrl: 'http://a4.att.hudong.com/21/09/01200000026352136359091694357.jpg',
    aHref: 'http://www.baidu.com'
   }
  })
 </script>

2.2v-bind动态绑定class【对象写法】

 <div id='app'>
  <!--<h2 v-bind:class="{类名1:true,类名2:false,类名2:boolean}">{{message}}</h2>-->
  <h2 v-bind:class="{active:isActive,line:isLine}" class="title">{{message}}</h2>
  <h2 v-bind:class="getClasses()">{{message}}</h2>
  <!--v-on:等价为@-->
  <button type="button" v-on:click="btnClick">按钮</button>
  <button type="button" @click="btnClick">按钮</button>
 </div>
 <script src="../vender/vue.min.js"></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    isActive: true,
    isLine: true,
    active: 'active'
   },
   methods: {
    btnClick: function(){
     this.isActive = !this.isActive
    },
    getClasses: function(){
     return {active:this.isActive,line:this.isLine}
    }
   }
  })
 </script>

2.3v-bind动态绑定class【数组写法】

 <div id='app'>
  <!--加双引号表示字符串，去掉双引号表示变量，如下-->
  <h2 class="title" :class="[active,line,'active','line']">{{message}}</h2>
  <h2 class="title" :class="getClass()">{{message}}</h2>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    active: 'aaaaa',
    line: 'bbbbb'
   },
   methods: {
    getClass: function(){
     return [this.active,this.line,'active','line']
    }
   }
  })
 </script>

3.计算属性computed

例1：

<div id='app'>
  <!--显示两名字，中间有一个空格-->
  <h2>{{firstName+' '+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--计算属性(computed)，直接写，不需要小括号-->
  <h2>{{fullName}}</h2>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    firstName: 'aaaaa',
    lastName: 'bbbbb'
   },
   //计算属性（起名字尽量按属性起名字）
   computed: {
    fullName: function(){
     return this.firstName + ' ' + this.lastName
    }
   },
   methods: {
    getFullName: function(){
     return this.firstName + ' ' + this.lastName
    }
   }
  })
 </script>

例2：

 <div id='app'>
  <!--求书本总价格-->
  <h2>总价格:{{books[0].price+books[1].price+books[2].price+books[3].price}}</h2>
  <h2>总价格:{{TotalPrice}}</h2>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    books: [
     {id:110, name: 'Unix', price:1},
     {id:111, name: 'Unix1', price:2},
     {id:112, name: 'Unix2', price:3},
     {id:113, name: 'Unix3', price:4}
    ]
   },
   //计算属性会进行缓存，如果多次使用时，计算属性只会调用一次，性能更高
   computed:{
    TotalPrice: function(){
     let result = 0
      for (let i=0;i<this.books.length;i++){
       result = result + this.books[i].price
      }
     return result
     /*es6语法
     1.  for(let i in this.books){}
     2.  for(let book of this.books)
     */
    }
   }})
 </script>

计算属性和methods的区别
例3：

 <div id='app'>
  <!--mustache拼接,一般不采用，语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
  <!--在多次使用时，getfullnane打印四次，fullname只打印一次，mentods只执行一次，性能更高-->
  <!--methods方法-->
  <h2>{{getfullName()}}</h2>
  <h2>{{getfullName()}}</h2>
  <h2>{{getfullName()}}</h2>
  <h2>{{getfullName()}}</h2>
  <!--computed属性-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
 </div> 
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    firstName: 'aaaaa',
    lastName: 'bbbb'
   },
   computed: {
    fullName: function(){
     console.log('fullname')
     return this.firstName + ' ' + this.lastName
    }
   },
   methods: {
    getfullName: function(){
     console.log('getfullname')
     return this.firstName + ' ' + this.lastName
    }
   }
  })
 </script>

4.事件监听v-on

4.1v-on写法

v-on: 在某些时候可以使用简写@ 符号
例：

 <div id='app'>
  <h2>{{counter}}</h2>
  //写法1
  <button v-on:click="counter++">按钮+</button>
  <button v-on:click="counter--">按钮-</button>
  <br>
  //写法2
  <button v-on:click="increment()">按钮+</button>
  <button v-on:click="decrement()">按钮-</button>
  <br>
  //写法3
  <button @click="increment()">按钮+</button>
  <button @click="decrement()">按钮-</button>
  <br>
  //如果方法没有额外参数，且在事件监听的时候，方法后的()可以不添加
  <br>
  //即
  <br>
  //写法4
  <button v-on:click="increment">按钮+</button>
  <button v-on:click="decrement">按钮-</button>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    counter:0
   },
   methods: {
    increment(){
     this.counter++
    },
    decrement(){
     this.counter--
    }
   }
  })
 </script>

4.2v-on修饰符

.stop
.prevent
.enter
.once

 <div id='app'>
  //1.  .stop修饰符的使用，阻止冒泡
  <div @click="divclick">
   aaaaaa
   <button @click.stop="btnclick">按钮</button>
  </div>
  <br>
  //2.  .prevent修饰符的使用
  <br>
  <form action="baidu">
   <input type="submit" value="提交" @click.prevent="submitclick"/>
  </form>
  <br>
  //3.  .监听某个按键键盘键的点击  .加上按键，例如：.enter
  <br>
  <input type="text" @keyup.enter="keyclick">
  <br><br>
  //4.  .once 只触发一次
  <br>
  <button @click.once="btn2click">按钮2</button>
 </div>
 
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊'
   },
   methods:{
    divclick(){
     console.log('divclick')
    },
    btnclick(){
     console.log('btnclick')
    },
    submitclick(){
     console.log('submitclick')
    },
    keyclick(){
     console.log('keyclick')
    },
    btn2click(){
     console.log('btn2click')
    }
   }
  })
 </script>

5.条件判断v-if,v-else

例1：

 <div id='app'>
  <h2 v-if="isTrue">{{message}}</h2>
  <h1 v-else>{{messagetwo}}</h1>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    messagetwo: 'dkjfalsjdfa',
    isTrue:true
   }
  })
 </script>

例2：用户登陆案例

 //加上key，切换类型之后输入框内的文本就会消失，<br>
 //key相同的时候内容不会消失，key不同就会消失<br><br><br>
 <div id='app'>
  <span v-if="isUserName">
   <label for="username">用户账号</label>
   <input type="text" placeholder="用户账号" id="username" key='a'>
  </span>
  <span v-else>
   <label for="emal">用户邮箱</label>
   <input type="text" placeholder="用户邮箱" id="emal" key='b'>
  </span>
  <button @click="isUserName = !isUserName">切换类型</button>
  <button @click="btn()">切换类型</button>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    isUserName: true
   },
   methods:{
    btn(){
     this.isUserName = !this.isUserName;
     return isUserName;
    }
   }
  })
 </script>

6.条件判断v-show

 <div id='app'>
  <!--
  
  v-if  当条件为false时，包含v-if指令的元素根本就不会存在dom中，修改称true时候会重新创建一个
  v-show  当条件为false时，v-show只是给元素增加一个行内样式display:none，修改为true时只会修改行内样式重新显示，修改为display:block
  开发中的选择
  当需要在显示和隐藏之间切换频率特别高，使用v-show
  当只有一次切换时候，使用v-if
  
  -->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    isShow: true
   }
  })
 </script>

7.循环遍历

使用v-for尽量绑定key，确保唯一性，达到性能应用

7.1v-for遍历数组

 <div id='app'>
  //在遍历过程中，没有使用索引值（下标值）
  <ul>
   <li v-for="item in names">{{item}}</li>
  </ul>
  //在遍历过程中，获取索引值
  <ul>
   <li v-for="(item,index) in names">{{(index+1)+'.'+item}}</li>
  </ul>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    names:['654321','aaa','bbb','dddf','afdadf']
   }
  })
 </script>

7.2v-for遍历对象

 <div id='app'>
  //在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
  <ul>
   <li v-for="item in info">{{item}}</li>
  </ul>
  //获取key和value,(value,key),如下，（a，b）中，a是value，b是key
  <ul>
   <li v-for="(a,b) in info">{{b+':'+a}}</li>
  </ul>
  //获取key，value，和index
  <ul>
   <li v-for="(value,key,index) in info">{{(index+1)+'-'+key+'-'+value}}</li>
  </ul>
  
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    info:{
     name:'啊啊啊',
     age:18,
     heigth:180
    }
   }
  })
 </script>

8.v-model

8.1v-model结合checkbox（单选框）

  <div id='app'>
   <!--单选框案例-->
   <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
   </label>
   <h2>您选择的是：{{isAgree}}</h2>
   <button :disabled="!isAgree">下一步</button>
  </div>
  <script src='../vender/vue.min.js'></script>
  <script>
   const app = new Vue({
    el: '#app',
    data: {
     isAgree: false
    }
   })
  </script>

8.2v-model结合checkbox（多选框）

  <div id='app'>
   <!--多选框案例-->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="台球" v-model="hobbies">台球
    
    <h2>{{hobbies}}</h2>
  </div>
  <script src='../vender/vue.min.js'></script>
  <script>
   const app = new Vue({
    el: '#app',
    data: {
     hobbies: []
    }
   })
  </script>

8.3v-model结合select（单选框）

  <div id='app'>
   <select name="abc" id="" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橙子">橙子</option>
   </select>
   <h2>{{fruit}}</h2>
  </div>
  <script src='../vender/vue.min.js'></script>
  <script>
   const app = new Vue({
    el: '#app',
    data: {
     message: '你好啊',
     fruit :'香蕉'
    }
   })
  </script>

8.4v-model结合select（多选框）

  <div id='app'>
   <select name="abc" id="" v-model="fruit" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橙子">橙子</option>
   </select>
   <h2>{{fruit}}</h2>
  </div>
  <script src='../vender/vue.min.js'></script>
  <script>
   const app = new Vue({
    el: '#app',
    data: {
     message: '你好啊',
     fruit :[]
    }
   })
  </script>

8.5v-model结合select（值绑定）

 <div id="app">
  <label v-for="item in allFruit" :for="item">
   <input type="checkbox" name="" :id="item" :value="item" v-model="fruit"/>{{item}}
  </label>
  <h2>你选择的是:{{fruit}}</h2>
 </div>
 <script src="../vender/vue.min.js"></script>
 <script>
  const app = new Vue({
   el:'#app',
   data: {
    allFruit: ['苹果','香蕉,','橙子','西瓜','猕猴桃,','火龙果'],
    fruit:[]
   }
  })
 </script>

8.6v-model修饰符

 <div id='app'>
  <!-- 1.修饰符:lazy -->
  <!-- text框失去焦点或者回车按下时候实现绑定 -->
  <input type="text" name="" id="" value="" v-model.lazy="message"/>
  <h2>{{message}}</h2>
  
  <!-- 2.修饰符:number -->
  <!-- 将类型转换成number类型 -->
  <input type="number" name="" id="" value="" v-model.number="age"/>
  <h2>{{age}}+{{typeof age}}</h2>
  
  <!-- 3.修饰符:trim -->
  <!-- 去除空格 -->
  <input type="text" name="" id="" value="" v-model.trim="name"/>
  <h2>您输入的名字是：{{name}}</h2>
 </div>
 <script src='../vender/vue.min.js'></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    message: '你好啊',
    age: '',
    name: ''
   }
  })
 </script>

一叶、

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE笔记（一）

VUE笔记目录1.VUE初始化2.v-bind使用2.1v-bind基本使用2.2v-bind动态绑定class【对象写法】2.3v-bind动态绑定class【数组写法】3.计算属性computed4.事件监听v-on4.1v-on写法4.2v-on修饰符5.条件判断v-if,v-else6.条件判断v-show7.循环遍历7.1v-for遍历数组7.2v-for遍历对象8.v-model8.1...
复制链接

扫一扫