vue2入门基础知识总结

vue总结1

1.概述
2.基础
3.指令
4.存储
5.绑定
6.过滤filter
7.动画
8.组件

1.概述

• Vue.js的定位是一个渐进式框架
• 前端三大mvvm框架 vue , react ,angular
• 特点：
  简单上手方便，只需要具备基本的HTML/JavaScript/CSS 基础
  结合Angular指令与react组件思维
  生态丰富（插件多）API文档完善
• vue官网 插件案例 需引入的js

2.基础

#### 常用的实例化参数 - **1.el:{ } 选择目标标签** - **2.data:{ } 指定数据** - **3.methods:{ } 方法** - **4.computed:{ } 计算** 从现有的数据计算出新的数据 通常会缓存 多对一 格式： 

• 5.watch:{ } 监听
  监听数据的变化，并执行回调函数handler 一对多
  
• 6.directives:{ } 指令(可设置自定义指令)
  获取节点 操作dom节点时使用
  一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
  bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  

格式

先给标签绑定一个id和title属性，例如：

<div id="app">
	
</div>

new Vue({el:{ },data:{ }})
或 var app = new Vue({el:{ },data:{ }})

<div id="app">
	<!-- 写法1 -->
	<p v-text="msg"></p>
	<!-- 写法2 -->
	<p>{
  {msg}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	new Vue({
     
		el:"#app",
		data:{
     
			msg:"你好 Vue"
		},
</script>

3.指令

指令的值可以是简单的JavaScript #### 文本渲染指令 - { { }} - v-text - v-html 渲染html文件 #### 属性绑定 给html标签绑定一个属性值应该使用 **v-bind:属性名称 = "指令值"** 简写为 **:属性名称 = "指令值"** 例如：

<div id="app">
	<p v-bind:title="title">{
  {msg}}</p>
</div>
<script>
new Vue({
     
	el:"#app",
	// data:function() 的简写
	data(){
     
		return{
     
			msg:"你好！"，
			title:"Vue",
		}
</script>

条件渲染

• v-if
• v-else if
• v-else
• v-show

v-if 和 v-show区别：

v-if	v-show
节点隐藏，条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）	css隐藏(通过display：none)
一次性切换显示隐藏时使用(首次渲染开销小)	频繁切换时使用(切换开销小)
节点直接删除，不占空间	控制台输出仍显示DOM，即节点不消失
有配套的 v-else-if 和 v-else	没有
可以搭配 template 使用	不行

列表渲染

v-for=" " 案例(右侧为结果)：

事件指令

采用 v-on:事件类型=“响应函数”
例如点击事件执行say函数 v-on:click=“say()” 简写为 @click=“say()”

事件修饰符

• .stop 阻止冒泡事件 向上传递
• .prevent 阻止默认事件
• .once 只执行一次
• 可同时写多个，例如：@click.stop.prevent.once=“num++”

键盘事件

事件对象

<div id="app">
	<input type="text" v-model="num" @keyup="KeyHd($event)">
</div>
<script>
	new Vue