系列文章目录
提示：阅读本章之前，请先阅读目录
文章目录
前言
兼容性
不支持IE8及以下的版本
Devtools
想要更便捷的开发vue，学会按照Devtools
开发版和生产版
开发版的，包含了，警告，错误和调试
生产版，剔除了警告，错误，调试
安装
npm install vue
Vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本
Vue官方的一个CLI，快速搭建单页面应用的脚手架，只需要几分钟，就可以运行起来，并且带有热重载，lint代码校验，以及生产环境，即可用的构建版本
编译器
只有完整版，才能使用template编译器
因为vue-cli，默认用的版本是vue.runtime.js，他是不支持template模板编译的
所以，会有两种写法
template编译器
new Vue({
template: "<div>我需要一个完整的vue，即引入: vue.js</div>"
})
不需要编译器
new Vue({
render: h => h("#app", APP)
})
Vue.js 是什么
Vue是一套渐进式框架，它是被设计为自底向上逐层的应用，它只关注视图层，同时也是单页面应用
最基本的Vue
<body>
<div id="app">Hello world</div>
</body>
const vm = new Vue({
el: "#root",
data() {
return {
name: "Hello"
}
}
})
v-bind 指令
Vue提供的特殊attribute（属性）
split 和 reverse 搭配
let name = "Hello Smobee, How old are you ?"
// 分割每个字符，形成数组
const arr1 = name.split("")
// 将数组反转
const arr2 = arr1.reverse()
// 将数组每个字符拼接
const newName = arr2.join("")
v-model 双向绑定
<input v-model="name">
new Vue({
el: "#root",
data() {
return {
name: "Smobee"
}
}
})
vue-component 定义组件
Vue.component("SchoolView", {
template: `<div>Hello</div>`
})
v-bind
完整写法
<input v-bind:value="name"/>
简写是
<input :value="name"/>
Object.freeze
var obj = {
name: "smobee"
}
Object.freeze(obj)
new Vue({
el: "#root",
data() {
return {
obj
}
}
})
// 这里的obj，不再是响应式了，因为Object.freeze会阻止vue的跟踪
箭头函数
不要在vue实例的property使用箭头函数
created: () => {
// 取不到
console.log(this.name)
}
不要在回调函数，使用箭头函数
vm.$watch("a", (newValue) => {
// 取不到
this.name = newValue
})
v-once
只会读取一次，后面不会更新
<span v-once>{{ name }}</span>
[] 方括号的attribute
vue 2.6只会，支持方括号，进行动态javascript
// 最后这里会变成 :id="xxxx"
<div :[attrName]="xxxxxx">
data() {
return {
attrName: "id"
}
}
SPA 单页面应用
Single page application
v-on
完整
<div v-on:click="onClick"></div>
简写
<div @click="onClick"></div>
v-if 的 key
这里没有用key，input框被会复用，placeholder会被更新
<div v-if="state">
<input placeholder="Hello i am a input"/>
</div>
<div v-else>
<input placeholder="Hello i am b input . xixi"/>
</div>
这里用的key，input框，则不会被复用，每次都会重新渲染
<div v-if="state">
<input placeholder="Hello i am a input" key="aInput"/>
</div>
<div v-else>
<input placeholder="Hello i am b input . xixi" key="bInput"/>
</div>
v-show
只是切换元素的css样式，display:none
并且无法用于template
v-for和v-if
v-for的优先级更高
如果是搭配使用
那么就可以实现，每个循环输出的元素，进行一次v-if的判断
<div v-for="(item, index) in arr" v-if="item">
</div>
$event
// 这样可以传递原生事件
<div @click="onClick(item, $event)"></div>
v-model 修饰符
// 输入后的自动转为数值类型
<input v-model.number="age">
// 输入后的自动去除首尾空格
<input v-model.trim="name">
props
传递一个对象
obj: {
name: "xixi",
age: 18
}
<SchoolView v-bind="obj" ></SchoolView>
等于
<SchoolView :name="obj.name" :age="obj.age"></SchoolView>
自定义事件命名
最好用 kebab-case 方法命名
<SchoolView @new-name-click="handleClick"><SchoolView/>
因为在html是不区分大小写的
虽然是写
@newNameClick，但是实际上，在html上是@newnameclick
所以用this.$emit(“newNameClick”)，是无法触发事件的
自定义事件原生事件
<SchoolView @focus.native="handleFocus"><SchoolView/>
组件缓存
<kepp-alive>
<SchoolView ><SchoolView/>
</kepp-alive>
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
