了解简单VUE

快速了解vue

V-HTML

v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的().html() v-text vue提供的一个指令，相当于原生js中的 innerText 的功能,相当于 jQuery 中的().text() ,一般会用 文本 形式代替 {{ msg }}

	<div v-html="msg"></div>
	data: { 
		msg: '<h1>hello vue</h1>' 
	}

简单表达式

使用三元（目）运算符

{{ sex == 0 ? '女' : '男' }} 
{{ msg.split('').reverse().join('*') }} 
data: { 
	sex: 0, 
	msg: 'hello vue' 
}

vue常用指令

input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性
不常用的
v-slot
v-pre
v-cloak
v-once

事件简写形式 v-on:click =》 @click

<button onclick="fn()">click</button>       //原生js
<button v-on:click="fn()">click</button>   //vue
<button @click="fn()">click</button>       // vue简写

属性的简写形式 v-bind:class =》 :class

<div class="test"></div>  		  // 原生，test就是一个固定的值
<div v-bind:class="test"></div>   //vue中，test可以是一个变量
<div :class="test"></div>         // vue简写形式

绑定属性

绑定属性必然跟标签相关
适合场景：
img 的 src 属性(从服务器获取了地址)
组件间的传值

<div id="app"> 
	<div msg="msg">原生的属性，只能是定值</div> 
	<div v-bind:msg="msg">利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量</div> 
	1<img src="img" alt=""> 
	2<img v-bind:src="img" alt=""> 
</div> 
const app = new Vue({ 
	el: '#app', 
	data: { 
		msg: 'hello vue', 
		img: 'https://cn.vuejs.org/images/logo.png' 
	} 
})

class绑定

* 对象

<style>
.active {
    font-size: 40px;
    color: #f66;
}
</style>
<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div>
data: {
    flag: true
}

* 数组

<style>
.active {
    font-size: 40px;
    color: #f66;
}
.test {
    background-color: #ccc;
}
</style>
<div :class="[activeClass, testClass]">数组写法就是先把数据定义好，直接数组包裹即可</div>
data: {
    activeClass: 'active',
    testClass: 'test'
}

style绑定

* 对象

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件判断

v-if v-else-if v-else
v-show
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大

<div id="app"> 
	<div v-if="flag">如果为真我就显示</div> 
	<div v-if="test === 1">test的值为1</div> 
	<div v-else>test的值不为1</div> 
	<div v-show="flag">v-show也可以作为条件的判断，但是 显示/隐藏</div> 
</div>

v-if和v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

循环遍历

v-for = “item of/in list” :key=“唯一性的值”
v-for = “(item, index) of/in list” :key=“index”
可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 – 详细介绍 — 虚拟DOM算法）

事件修饰符

阻止冒泡 v-on:click.stop=“fn()”
阻止默认事件 v-on:click.prevent=“fn”
阻止冒泡阻止默认事件 v-on:click.stop.prevent=“fn”
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

按键修饰符

以前如果有一个表单输入框，当你输入之后敲回车想要打印值

<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {
	name.value
}

vue

<input @change.enter=“fn()” id=“name” />
.tab
.delete
.esc
.space
.up
.down
.left
.right

计算属性

任何复杂的业务逻辑，我们都应当使用计算属性。
在特定条件下，计算属性要优于方法
计算属性具有依赖性，计算属性依赖 data中的初始值，只有当初始值改变的时候，计算属性才会再次计算
计算属性一般书写为一个函数，返回了一个值，这个值具有依赖性，只有依赖的那个值发生改变，他才会重新计算 app.msg = “hello 1906”

原始数据： {{ msg }} <br /> 
计算属性的值： {{ computedMsg }} - {{ computedMsg }} -{{ computedMsg }} <br /> 
方法实现： {{ reversemsgfn() }} - {{ reversemsgfn() }}- {{ reversemsgfn() }} 
computed: { // 计算属性 ，计算属性可以依据data中的初始数据转换而来，可以像data中的数据一样使用，一般为函数，返回一个值 
computedMsg () { 
	console.log('computed') // 执行一次 
	return this.msg.split('').reverse().join('') 
	} 
}, 
methods: { 
	reversemsgfn () { 
	console.log('methods') // 执行3次 
	return this.msg.split('').reverse().join('') 
	} 
}

vue的生命周期函数

使用方法 --- 4个before，4个ed，创造，装载，更新，销毁
初始化阶段
beforeCreate(){} // 准备怀孕
created(){} // 怀上了 *******************************************
beforeMount(){} // 准备生
mounted(){} // 生下来了 *************************************************
运行时阶段
beforeUpdate(){} // 每天都在长大
updated(){} ************************
销毁阶段
beforeDestroy(){} // 马上 game over
destroyed(){} // game over gg ************
综上所述，会在 created 或者 mounted 中请求数据
如果必须使用dom操作，那么可以在 mounted 和 updated 中

通过应用生成器工具 express-generator 可以快速创建一个应用的骨架
express-generator 包含了 express 命令行工具

vue中数据的请求fetch和axios

fetch API 是基于 Promise 设计,旧浏览器不支持 Promise，需要使用 polyfill es6-promise 。
fetch 不需要额外的安装什么东西，直接就可以使用

// fetch
fetch(url, { 
	method:'post', 
	headers: { 
	"Content‐Type": "application/x-www-form-urlencoded" 
	}, 
	body: "name=kerwin&age=100" 
}).then(res => res.json()).then(data => {console.log(data)}) 

fetch(url, { 
	method:'post', 
	headers: { 
	"Content‐Type": "application/json" 
	}, 
	body: JSON.stringify({ 
		name:"kerwin", 
		age:100 
	}) 
}).then(res => res.json()).then(data => {console.log(data)})
// axios
cnpm i axios	//必须得安装之后才能使用 
axios.get(url).then(res => {console.log(res.data)})
axios.post(url, {}).then(res => {console.log(res.data)})