Vue简介

最新推荐文章于 2022-09-01 17:14:22 发布

琳琳_朵朵

最新推荐文章于 2022-09-01 17:14:22 发布

阅读量102

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_50882269/article/details/110941107

版权

Vue

特点 : 原生js与jquery都是操作的dom树,而且在修改dom元素时,对dom进行了多次重绘,但是vue不一样,vue采用文档碎片将dom多次重绘改为了一次,提高了性能,效率最高.

基本使用

1 . 官网下载vue.js 并在html中引入官网地址:https://cn.vuejs.org/v2/guide/installation.html

2.在body中必须写一个挂载点一般会用div包裹起来挂载中的内容被称为模板模板是有html与js两部分组成并不是单纯的html页面了

模板中的语法: 指令与插值

指令:用来修改模板中标签属性.内容.样式

v-bind:href=“url” 单向绑定 ""双引号中间写的是js代码,而不是字符串了 url是在vm实例的data中定义的属性简写为 :href=“url”

v-on:click=“test” 事件绑定 ‘’’'双引号中写的是实例化中metheds中的方法简写为@click

v-modle=“msg” 双向绑定又称MVVM m代表model–数据 v代表view 视图页面 vm代表vue的实例化对象双向绑定的流程:数据可以从data流程页面,在页面被更新后,也会冲页面流向data数据,data数据被更改之后会重新流向页面进行更新页面

v-for="(item,index) in items" :key=“item.id” 循环执行内部传两个参数还需要单独唯一的key

插值:用来修改模板中标签的内容使用{{}} 双花括号

3.在script中实例化vm对象,和挂载点进行挂载

const vm = new Vue({
 //el被称作挂载点 本质上是一个css的选择器字符串，标识着vm要和谁去绑定挂载  也有两种写法 另外一种在实例后.$mount(#app)
  el:'#app',
  
  //data主要是后台返回的数据  data可以是一个对象  也可以是一个函数
  data:{
    msg:'i love you ~'
  }
  //函数写法: data是函数  在内部return一个对象  对象内写法与上面一样
  data(){
  	return {
  	
  	}
  }
  
  //methods:实例化内部的函数写在这里  也是一个对象
  methods:{
  	run(){
  		函数体内容
  	}
  }
   
   //computed  计算属性  当需要一个数据时,这个数据是由其他的数据计算得来的  可以采用计算属性  计算属性是一个对象,对象内部也是一个一个对象 对象中有2个函数  get(){}  set(){}   get是用来获取计算后的属性 是一个自调动函数  set是用来设置更新新的数据  一般用于表单类  如果get  而不需要set  可以支架简写为一个方法
   computed:{
   		//计算的函数名  可以计算多个  每一个都是一个对象
   		demo:{
   			get(){ //获取计算后的数据
   			
   			},
   			set(){//设置更新计算数据  如果不是表单类  不涉及设置 则可简写  直接写demo函数即可
   			
   			}
   		}
   }
   
   //watch  监视数据  监视数据时  数据一定存在 且还是可以变的  也是一个对象
   watch:{
   		//监视的属性  例如fristName  也是一个对象
       fristName:{//对象是一个配置对象  handler不能更改  是一个函数 内部传两个参数  新的值  原来的值
           handler(newVal,oldVal){
               //写逻辑  内部还可以开启异步任务
               
           },
  //watch是在监视的内容发生变化时调用内部的handler函数  如果没有变化 则不执行 配置该属性是为了无论监视内容是否发生改变,都需要强制执行一次
           immediate:true 
       }
   }
   
})