建设一中校园网站河北seo技术培训
系列文章目录
提示：阅读本章之前，请先阅读目录
文章目录
- 系列文章目录
- 前言
- 兼容性
- Devtools
- 开发版和生产版
- 安装
- Vue-cli
- 编译器
- Vue.js 是什么
- 最基本的Vue
- v-bind 指令
- split 和 reverse 搭配
- v-model 双向绑定
- vue-component 定义组件
- v-bind
- Object.freeze
- 箭头函数
- v-once
- [] 方括号的attribute
- SPA 单页面应用
- v-on
- v-if 的 key
- v-show
- v-for和v-if
- $event
- v-model 修饰符
前言
兼容性
不支持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">