共计 4538 个字符，预计需要花费 12 分钟才能阅读完成。
一、browser-sync
- 装置
npm i browser-sync -g
- 启动
法一：browser-sync start -s -f **/*
法二：
package.json 配置
"scripts": {"start": "browser-sync start -s -f **/* --directory --watch"}yarn start
html 组成部分：
标签、属性、子元素
html 属性：
自定义属性、固有属性
二、vue
vue 实例化
<div id="root">
<div>
<input
type="text"
v-model="task"
v-on:keyup.enter="handleKeyUp"
>
</div>
<ul>
<li v-for="(task, index) of tasks">
{{task}} <button v-on:click="handleClick(index)">X</button>
</li>
</ul>
</div>
<!-- 插值表达式 -->
<!-- {{title}} -->// 实例化 Vue
new Vue({
el: "#root", // root 节点
data: { // 数据源
title: 'hello world!!',
task: '',
tasks: [
'吃饭',
'睡觉',
'打豆豆'
]
},
methods: { // 办法
handleKeyUp() {
// 操作 task
this.tasks.push(this.task)
this.task = ''
},
handleClick(index) {this.tasks.splice(index, 1)
}
},
})指令
指令 (Directives) 是带有 v- 前缀的非凡 attribute。
v-bind 简写：
用于响应式地更新 HTML attribute
<input v-bind:value="task">v-if
<p v-if="seen"> 当初你看到我了 </p>v-if 指令将依据表达式 seen 的值的虚实来插入 / 移除 <p> 元素。
v-for
<li v-for="(task, index) of tasks"></li>v-on 简写 @
<input v-on:input="handleInput">v-model
<input v-model="task">v-once
执行一次插值，当数据扭转时，插值处的内容不会更新。
<span v-once> 这个将不会扭转: {{msg}}</span>v-html
输入真正的 HTML
<div v-html="header"></div>const data = {header: '<iframe src="http://www.baidu.com"/>',}容易导致 XSS 攻打
v-text
<div v-text="header"></div>数据双向绑定
v-model
Vue 编程特点
- 数据驱动编程，不做 DOM 操作
- 响应性: 必须当时在 data 里定义好
- 响应个性的特例：
- vm.fruits.length
- vm.fruits[0] = ‘’ // debug: vm.$forceUpdate()
- vm.obj.y = 200 // 给对象新增属性，得不到响应 debug: vm.$set(vm.obj, ‘y’, 200) or Vue.set(vm.obj, ‘y’, 300)
- BUG 起因：Object.defineProperty()，不能监测数组的变动
- vm.$set(vm.fruits, 0, ‘🍉’)
组件
- xml: 只作为一个数据承载的形式
-
组件的劣势能够复用
vscode snipets<ul> <div> 工作列表：</div> <my-list v-for="(item, index) of tasks" v-bind:item="item" v-bind:index="index" v-bind:tasks="tasks" ></my-list> <my-list v-for="(item, index) of fruits" v-bind:item="item" v-bind:index="index" v-bind:fruits="fruits" ></my-list> </ul>// 定义一个组件 Vue.component('my-list', {props: ['item', 'index', 'tasks', 'fruits'], template: ` <li> {{item}} <button v-on:click="handleClick(index)">X</button> </li> `, methods: {handleClick(index) {// console.log(index) this.tasks.splice(index, 1) } }, })
实例
new Vue({
el: "#root", // root 节点
data: { // 数据源
title: 'hello world!!',
task: '',
tasks: [
'吃饭',
'睡觉',
'打豆豆'
],
fruits: [
'🍇',
'🍒'
]
},
methods: { // 办法
// handleInput(e) {
// this.task = e.target.value
// }
handleKeyUp() {
// 操作 task
this.tasks.push(this.task)
this.task = ''
}
},
})生命周期函数（生命周期钩子）
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
beforeCreate
beforeCreate() {console.log('beforeCreate')
// 应用场景
// 1、能够在这里做一个非响应性个性的初始化数据
// 2、最早调用 Ajax 申请的钩子
// 测试用例
console.log(this)
console.log(this.title) // 不能拜访 title
this.initData = 'hello'
// 拜访到了未解析的模板
// console.log(document.querySelector('#root').innerHTML)
setTimeout(() => {this.title = 'word!!!'}, 2000)
// ajax
setTimeout(() => {this.fetchData()
}, 0)
},created
created() {console.log('created')
// 应用场景
// 1、能够初始化 data 里的数据
// 2、能够在这里做 Ajax
console.log(this)
console.log(this.title)
this.title = 'world!!!'
console.log(document.querySelector('#root').innerHTML)
this.fetchData()},beforeMount
beforeMount() {
// 应用场景
// 1、再给一次初始化 data 里的数据的机会
// 2、能够在这里做 Ajax
console.log('beforeMount')
console.log(this)
console.log(this.title)
console.log(document.querySelector('#root').innerHTML)
},mounted
mounted() {
// 曾经做完了第一次的渲染，才调用的 mounted
// 应用场景
// 1、在 DOM 第一次渲染结束后，做事件
// 2、比拟适宜在这里做 Ajax
console.log(this)
console.log(this.title)
console.log(document.querySelector('#root').innerHTML)
this.title = 'world!!!'
this.fetchData()
setTimeout(() => {this.$destroy()
}, 2000)
},beforeUpdate
beforeUpdate() {console.log('beforeUpdate')
},updated
updated() {console.log('updated')
},beforeDestroy
beforeDestroy() {console.log('beforeDestroy')
},destroyed
destroyed() {console.log('destroyed')
},var vm = new Vue({// el: '#root',}
vm.$mount('#root')生命周期图示：https://cn.vuejs.org/images/l…
计算属性 computed
<div id="example">
<p>Original message: "{{message}}"</p>
<p>Computed reversed message: "{{reversedMessage}}"</p>
</div>var vm = new Vue({
el: '#example',
data: {message: 'Hello'},
computed: {
// 计算属性的 getter
// getter 函数
// 依据依赖主动返回新的值，这个值能够是响应式的
// 依据依赖缓存：依赖的值不发生变化，计算属性（函数）不调用
// 计算属性肯定要有返回值
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})vm.message 产生扭转时, 所有依赖 vm.reversedMessage 的绑定也会更新.
监听属性 watch
1、监听数据（data）的变动，做一件事
2、特地适宜异步操作的场景
<div id="demo">{{fullName}}</div>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},
lastName: function (val) {this.fullName = this.firstName + ' ' + val}
}
})计算属性的 setter
计算属性默认只有 getter，不过在须要时你也能够提供一个 setter：
computed: {
fullName: {
// getter
get: function () {return this.firstName + ' ' + this.lastName},
// setter
set: function (newValue) {var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}当初再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
立刻调用的函数表达式（IIFE）= 自执行函数
计算属性会依据依赖缓存，而办法不会。
正文完
