vue核心语法2

简介: vue核心语法2

一、计算属性

1、案例引入

实现如下效果 当姓和名变化时 全名跟着变化

2、使用插值语法实现和methods实现

<body>

<div id="root">

   姓<input v-model="firstName" type="text">

   名<input v-model="lastName" type="text">

   <!--使用插值语法实现-->

   全名<span>{{firstName}}{{lastName}}</span>

   <!--使用methods实现 vue当数据发生变化 模板重新渲染加载 数据也会重新更新-->

   全名<span>{{fullName()}}</span>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           firstName:"",

           lastName:""

       },

       methods:{

           fullName(){

             return this.firstName+this.lastName

           }

       }

   })

</script>

</body>

上面案例插入语法缺点

3、计算属性定义

要用的属性不存在 要通过已有属性计算得出

4、原理

5、优点

和methods对象实现相比 有缓存机制 效率更高 调试方便

备注:计算属性最终出现在vm上 直接读取即可

<body>

<div id="root">

   姓<input v-model="firstName" type="text">

   名<input v-model="lastName" type="text">

   全名<span>{{fullName}}</span>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           firstName:"",

           lastName:""

       },

       methods:{

       },

       /*1、fullName属性通过函数计算出的新属性 fullName也在vm对象上

       * 2、功能:当有人读取fullName时 get且返回值作为fullName值

       * 3、会做缓存处理,初次读取和所依赖的数据发生变化时get调用*/

       computed:{

           fullName:{

               get(){

                   return this.firstName+this.lastName

               },

               /*当新属性被修改时候调用*/

               set(){


               }

           }

       }

   })

</script>

</body>

6、计算属性简写方式

确定计算属性只读不写时候才能简写

<body>

<div id="root">

   姓<input v-model="firstName" type="text">

   名<input v-model="lastName" type="text">

   全名<span>{{fullName}}</span>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           firstName:"",

           lastName:""

       },

       methods:{

       },

       computed:{

           //简写方式 看着是个函数 实际是个属性

           fullName(){

               return this.firstName+this.lastName;

           }

       }

   })

</script>

</body>

二、监视属性

1、定义

监视某一个属性的变化,只有当监视的属性存在才能监视

2、两种写法

<body>

<div id="root">

   <span>天气{{info}}</span>

   <button @click="changeWeather">切换</button>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           isHot:true

       },

       methods:{

           changeWeather(){

               this.isHot = !this.isHot

           }

       },

       computed:{

           info(){

               return this.isHot ? '炎热':'凉爽'

           }

       },

       /*第一种写法:创建实列就已经知道要监视哪个属性就用这种方法*/

       watch:{

           //不仅可以监听data中属性 也可以监视计算属性info

           isHot:{

               immediate:true,//初始化就调用一下handler

               //当ishot发生变化时调用handler

               handler(newValue,oldValue){

                   console.log(newValue,oldValue);

               }

           }

       },

   });

   /*第二种写法:当用户行为发生变化时候才监视用这种*/

   vm.$watch('isHot',{

       immediate:true,

       handler(newValue,oldValue){

           console.log(newValue,oldValue);

       }

   })

</script>

</body>

3、深度监视

vue中的watch默认不监测对象内部值得变化(一层)

配置deep:true可以监测对象内部值得变化(多层)

<body>

<div id="root">

   <span>{{num.a}}</span>

   <button @click="num.a++">切换</button>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           num:{

               a:1,

               b:2

           }

       },

       methods:{

       },

       watch:{

           /*监视多级结构中某个属性变化*/

          'num.a':{

              handler(newValue,oldValue){

                  console.log(newValue,oldValue);

              }

          },

          /*监视多级中所有属性变化*/

           num: {

               deep:true,

               handler(newValue,oldValue){

                   console.log(newValue,oldValue);

               }

           }

       },

   });

</script>

</body>

备注:

vue自身是可以监测对象内部值得改变 但vue提供得watch默认不可以

使用watch需要根据数据结构得变化决定是否采用监视

4、简写

<body>

<div id="root">

   <span>{{num.a}}</span>

   <button @click="num.a++">切换</button>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           isHot:true

       },

       methods:{

       },

       watch:{

           /*当不用配置deep和immediate时监视可以简写如下*/

          isHot(newValue,oldValue){

              console.log(newValue,oldValue)

          }

       }

   });

   /*当不用配置deep和immediate时监视可以简写如下*/

   vm.$watch('isHot',function (newValue,oldValue) {

       console.log(newValue,oldValue)

   })

</script>

</body>

5、计算属性和监视属性对比

1、computed能完成的功能 watch都可以完成

2、watch能完成的功能 computed不一定能完成 例如watch可以进行异步操作

3、所有被vue管理的函数最好写成普通函数,别用箭头函数,这样this的指向才是vm

4、所有不被vue管理的函数(定时器函数、ajax回调函数、promise回调函数)最好携程箭头函数 这样this指向才是vm或者组件实列对象

三、样式绑定

1、通过class绑定样式(三种方式)

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <script src="js/vue.js"></script>

   <style>

       .basic{

           width: 200px;

           height: 200px;

       }

       .active1{

           background-color: rosybrown;

       }

       .active2{

           border-radius: 20px;

       }

       .active3{

           border-color: green;

           background-color: red;

       }

   </style>

</head>

<body>

<div id="root">

   <!--字符串写法:适用于样式的类名不确定需要动态指定-->

   <div class="basic" :class="one"></div>

   <!--数组写法:适用于要绑定的样式个数不确定 名字也不确定-->

   <div class="basic" :class="two"></div>

   <!--对象写法:适用于要绑定的样式个数确定 名字也确定 但要动态决定用不用-->

   <div class="basic" :class="three"></div>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           one:'active1',

           two:['active1','active2'],

           three:{

               active2:true,

               active3:true

           }

       },

   });

</script>

</body>

</html>

2、通过style绑定样式(2种)

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <script src="js/vue.js"></script>

   <style>

       .basic{

           width: 200px;

           height: 200px;

       }

       .active1{

           background-color: rosybrown;

       }

       .active2{

           border-radius: 20px;

       }

       .active3{

           border-color: green;

           background-color: red;

       }

   </style>

</head>

<body>

<div id="root">

   <!--对象写法-->

   <div class="basic" :style="styleObj">222</div>

   <!--数组写法-->

   <div class="basic" :style="styleArr">333</div>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           one:'active1',

           two:['active1','active2'],

           styleObj:{

               borderRadius:"20px",

               backgroundColor:"red"

           },

           styleArr:[

               {

                   borderRadius:"20px",

                   backgroundColor:"red"

               },

               {

                   fontSize:"20px",

                   padding:"20px"

               }

           ]

       },

   });

</script>

</body>

</html>

四、条件渲染和列表渲染

1、条件渲染

1.1、v-show语法

1、底层使用的是display实现,仅仅时样式的移除

<body>

<div id="root">

   <!--直接写表达式-->

  <div v-show="true">{{name}}</div>

   <!--通过属性控制-->

   <div v-show="flag">{{name}}</div>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           name:'hello',

           flag:true

       },

   });

</script>

</body>

1.2、v-if语法

1、v-if条件渲染时不展示dom的元素直接移除,而不是使用display隐藏

2、v-if可以和v-else-if、v-else一起使用 但要求结构不能被打断

3、template只能配置v-if使用(使用template不会破坏原来的元素结构)

html结构直接删掉

<body>

<div id="root">

   <!--直接写表达式-->

  <div v-show="true">{{name}}</div>

   <!--通过属性控制-->

   <div v-show="flag">{{name}}</div>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           name:'hello',

           flag:true

       },

   });

</script>

</body>

1.3、比较

1. 如果需要频繁切换 v-show 较好 因为节点在只是隐藏了

2. 当条件不成立时, v-if 的所有子节点不会解析

2、列表渲染

2.1、v-for

v-for指令用于展示列表数据,语法:v-for="(item,index) in xxx" :key="yyy"

可以遍历数组、对象、字符串、指定次数

<body>

<div id="root">

   <div>

       <!--遍历数组-->

       <h2 v-for="(item,index) in arr">{{item}}--{{item.id}}--{{item.name}}--{{index}}</h2>

       <!--遍历对象-->

       <h2 v-for="(value,key) in obj" >{{key}}--{{value}}</h2>

       <!--遍历字符串-->

       <h2 v-for="(item,index) in str" >{{item}}--{{index}}</h2>

       <!--遍历指定次数-->

       <h2 v-for="(number,index) of 5" >{{number}}--{{index}}</h2>

   </div>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           arr:[

               {

                   id:1,

                   name:'一'

               },

               {

                   id:2,

                   name:'二'

               },

               {

                   id:3,

                   name:'三'

               }

           ],

           obj:{

               id:1,

               age:12,

               name:'张三',

               sex:'男'

           },

           str:'hello',

       },

   });

</script>

</body>

2.2、key的作用和原理

3、列表过滤

案例截图,输入关键字模糊展示

3.1、使用监视属性实现

<body>

<div id="root">

   <input v-model="keyWord">

   <ul>

       <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>

   </ul>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           keyWord:'',

           persons:[

                 {id:1, name:'张三',age:10},

               {id:2, name:'李四',age:20},

               {id:3, name:'王五',age:30}

           ],

           filPersons:[]

       },

       watch:{

           keyWord:{

               immediate:true,

               handler(val){

                   this.filPersons = this.persons.filter((p)=>{

                       /*indexOf(str)没有找到返回-1 找到返回下表位置,如果var是''即空字符串,

                       则返回0即每个字符串都包含空字符串在开头*/

                       return p.name.indexOf(val)!== -1;

                   })

               }

           }

       }

   });

</script>

</body>

3.2、使用计算属性实现

<body>

<div id="root">

   <input v-model="keyWord">

   <ul>

       <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>

   </ul>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           keyWord:'',

           persons:[

                {id:1, name:'张三',age:10},

               {id:2, name:'李四',age:20},

               {id:3, name:'王五',age:30}

           ],

       },

       computed:{

           filPersons(){

               return this.persons.filter((p)=>{

                   return p.name.indexOf(this.keyWord) !== -1

               })

           }

       }

   });

</script>

</body>

当计算属性和监视都能实现的时候优先选择计算属性

4、列表排序

<body>

<div id="root">

   <input v-model="keyWord" type="text" placeholder="输入关键字查询">

   <button @click="sortType = 2">年龄升序</button>

   <button @click="sortType = 1">年龄降序</button>

   <button @click="sortType = 0">原顺序</button>

   <ul>

       <li v-for="(item,index) in filPersons" :key="item.id">{{item.id}}-年龄{{item.age}}-{{item.name}}</li>

   </ul>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           keyWord:'',

           sortType:0,

           persons:[

               {id:1, name:'张三',age:10},

               {id:2, name:'李四',age:20},

               {id:3, name:'张二三',age:90},

               {id:4, name:'王五',age:30}

           ],

       },

       computed:{

           filPersons(){

               const arr = this.persons.filter((p)=>{

                   return p.name.indexOf(this.keyWord) !== -1

               });

               //只要sort不是0 都是true

               if(this.sortType){

                   //sort会改变原数组 filter不会改变原数组

                   arr.sort((pre,next)=>{

                       //sort降序用后一个元素减去前一个元素即可 升序用前一个元素减去后一个元素

                       return this.sortType === 1 ? next.age-pre.age : pre.age-next.age

                   });

               }

               return arr;

           }

       }

   });

</script>

</body>

五、内置指令

1、v-text

向其所在的节点中渲染文档内容;会替换掉其他节点中的内容,但是插值语法表达式不会

2、v-html

向指定节点渲染包含html结构的内容

v-html有安全问题容易导致xss攻击,一定要在可信的内容使用v-html 不要在用户提交的内容

3、v-if

如果为 true, 当前标签才会输出到页面

4、v-else

如果为 false, 当前标签才会输出到页面

5、v-show

通过控制 display 样式来控制显示/隐藏

6、v-for

遍历数组/对象

7、v-on

绑定事件监听, 一般简写为@

8、v-bind

绑定解析表达式, 可以省略 v-bind

9、v-model

双向数据绑定

10、v-cloak

配合css解决由于网速慢是在页面展示{{xx}}问题

正常的html+js+css页面如下 是从头往下渲染的

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <!--如果加载这个资源花了5s(浏览器设置网速模拟)

   那么前5s是空白界面 然后从上而下加载页面 这个称为页面的阻塞  -->

   <script src="http://xxx/js/vue.js"></script>

</head>

<body>

<div id="root">

   <span>你好</span>

</div>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

          name:'<h3>你好</h3>'

       },

   });

</script>

</body>

</html>

上面也是可以正常运行的

但是js位置也可以放在body中

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

   <style>

       /*设置有v-clock属性的元素样式 v-clock在vue接管元素后自动消失*/

       [v-clock]{

           display: none;

       }

   </style>

</head>

<body>

<div id="root">

   <span v-clock>{{name}}</span>

</div>

<script src="http://xxx/js/vue.js"></script>

</body>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           name:'<h3>你好</h3>'

       },

   });

</script>

</html>


11、v-once

初次动态渲染后就视为静态内容,以后的数据改变不会引起v-once所在结构的更新可以用于优化性能

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

</head>

<body>

<div id="root">

   <span v-once>初始值{{num}}</span>

   <span>当前值{{num}}</span>

   <button @click="num++">num+1</button>

</div>

<script src="js/vue.js"></script>

</body>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           num:1

       },

   });

</script>

</html>


12、v-pre

v-pre不会编译当前元素

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

</head>

<body>

<div id="root">

   <span>固定的没有指令的可以加v-pre优化性能</span>

   <span v-pre>{{num}}有指令的不能加v-pre</span>

</div>

<script src="js/vue.js"></script>

</body>

<script>

   const vm = new Vue({

       el:"#root",

       data:{

           num:1

       },

   });

</script>

</html>

六、vue生命周期

  1. 初始化显示
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()
  1. 更新状态: this.xxx = value
  • beforeUpdate()
  • updated()
  1. 销毁 vue 实例: vm.$destory()
  • beforeDestory()
  • destoryed()

七、插件

作用

对vue增加作用,本质是一个{}对象,但是要求这个对象必须包含install(安装)方法,所以可以自定义插件

定义

export default {

/*vue会自动调用 可以带参数  这个Vue参数就是vm的缔造者即vue构造函数*/

install(Vue,x,y,z){

console.log(x,y,z)

//全局过滤器

Vue.filter('mySlice',function(value){

  return value.slice(0,4)

})


//定义全局指令

Vue.directive('fbind',{

  //指令与元素成功绑定时(一上来)

  bind(element,binding){

  element.value = binding.value

  },

  //指令所在元素被插入页面时

  inserted(element,binding){

  element.focus()

  },

  //指令所在的模板被重新解析时

  update(element,binding){

  element.value = binding.value

  }

})


//定义混入

Vue.mixin({

  data() {

  return {

    x:100,

    y:200

  }

  },

})


//给Vue原型上添加一个方法(vm和vc就都能用了)

Vue.prototype.hello = ()=>{alert('你好啊')}

}

}

引入并使用

main.js中引入并使用

import MyPlugins from "./MyPlugins";

Vue.use(MyPlugins,1,2,3)


相关文章
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
14 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0
|
4天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
4天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
4天前
|
JavaScript
vue封装svg
vue封装svg
10 0
|
4天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
8 0