根据各类网络教程总结的VUE前端基础知识点

VUE

Vue是一款用于构建用户界面的渐进式JS框架

​

模块化：项目划分模块，单独开发、维护，提高效率
组件化：将页面的各个组成部分封装为组件，提高复用性
规范化：提供标准的目录结构，编码规范，开发流程
自动化：项目构建、开发、测试、打包、部署

1.1 VUE工程化

创建一个工程化的VUE项目，执行命令npm create vue@{version}，将会安装并执行create-vue脚手架工具

执行npm install下载包

项目结构介绍

​

​npm run dev命令启动Vue项目

Vue实例与容器只能1-1对应

花括号中只能写JS表达式

Vue控制台 选项卡1-观察组件结构

1.3 模板语法

插值/指令 语法

在属性内插值被移除，只能用v-bind:xxx=“”，VUE会将双引号中的字符当作JS表达式执行

标签体中用插值语法，标签属性(解析标签)用指令语法

1.4 数据绑定

v-bind单向绑定，数据从data流向页面

v-model双向绑定，页面与data同时更新

v-model只能运用在表单类/输入类(有value值的)标签中

• el与data

new Vue({
	el:'#root'
	data:{
		name:"123"
	}
})

el绑定也可以写成：

const v = new Vue({
	el:'#root'
	data:{
		name:"123"
	}
})
v.$mount('#root') //挂载

好处是可以在绑定时做别的逻辑操作

==data的函数式写法：==

data:function(){
	return{
		name:'123'
	}
}

组件中必须使用此类写法，不要写箭头函数(保持this为vue实例)

1.5 MVVM模型 model-view-viewmodel

花括号中 vm中有的属性全都能用

1.6 数据代理

• Object.defineProperty()方法 (ES6)

用此方法加入的参数

默认不参与遍历 enumerable:true

默认不可修改 writable:true

默认不可删除 configurable:true

get:function(){
	return 'sth'
}

• 数据代理的定义

通过defineProperty()实现数据代理

• Vue中的数据代理

把vm中的数据用defineproperty()放在data中

使数据操作更方便

1.7 事件处理

methods:{
	v-on:click=“func” 或者 @click=“func($event, para, ...)”
}

• 事件修饰符

@click.stop 阻止事件冒泡

@click.prevent 阻止默认事件

@click.once 事件只触发一次

@click.capture 使用事件的捕获模式（div外到内）

@click.self 仅当e.target是当前操作元素才触发

@click.passive 事件的默认行为立即执行，无需等待回调

• 键盘事件

1.8 计算属性

1.插值语法{{str.slice(0,3)}} ===

//2.methods实现
{{func()}}
methods:{
	func(){
		return this.a + this.b
	}
}

===

//3.计算属性实现（相比methods有缓存）
computed:{
	func:{
		//自动调用
		get(){
			return this.a+this.b
		}
		//当func被修改时调用
		set(value){
			//要书写具体代码才能修改data中的内容，计算属性会自动根据data发生变化
		}
	}
}

• 监视属性 – watch

  // 监视属性变化时，handler自动调用
  // 监视多层级属性改变时，需给watch配置deep:true
  watch:{
      func:{
          //还有很多配置
          immediate:true
          handler(newvalue,oldvalue){
              pass
          }
  
      }
  }
  
  vm.$watch('属性', {
      immediate:true
      handler(newvalue,oldvalue){
          pass
      }
  })

• 计算属性和监视属性的区别
  watch不靠返回值，可以实现异步任务

  不被Vue管理的函数（如定时器setTimeout，Ajax的回调函数，Promise的回调函数）要写成箭头函数

1.9 绑定样式

<div id="root">
    // 绑定class样式，字符串写法
    <div class='stable_style' v-bind:class="varible_style" @click="change">{{name}}</div>

    //绑定style样式
    <div class='stable_style' :style="styleObj" @click="change">{{name}}</div>
</div>

<script>
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
	data:{
	    name:'123',
	    varible_style:"style1"
	  
	    // 字符串，对象，数组 both ok
	    styleObj:{
		fontSize:'40px'
	   }
	}

	methods:{
	    change(){
		this.varible_style='style2'
	    }
	}
    })
</script>

1.10 条件渲染

v-show / v-if

可以用