系列文章目录

提示：阅读本章之前，请先阅读目录

文章目录

• 系列文章目录
• 前言
• 兼容性
• 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: "
我需要一个完整的vue，即引入: vue.js
"
})

不需要编译器

new Vue({render: h => h("#app", APP)
})

Vue.js 是什么

Vue是一套渐进式框架，它是被设计为自底向上逐层的应用，它只关注视图层，同时也是单页面应用

最基本的Vue

Hello world
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 双向绑定

new Vue({el: "#root",data() {return {name: "Smobee"}}
})

vue-component 定义组件

Vue.component("SchoolView", {template: `
Hello
`
})

v-bind

完整写法

简写是

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

只会读取一次，后面不会更新

{{ name }}

[] 方括号的attribute

vue 2.6只会，支持方括号，进行动态javascript// 最后这里会变成 :id="xxxx"
data() {return {attrName: "id"}
}

SPA 单页面应用

Single page application

v-on

完整

简写

v-if 的 key

这里没有用key，input框被会复用，placeholder会被更新

这里用的key，input框，则不会被复用，每次都会重新渲染

v-show

只是切换元素的css样式，display:none

并且无法用于template

v-for和v-if

v-for的优先级更高

如果是搭配使用

那么就可以实现，每个循环输出的元素，进行一次v-if的判断

$event

// 这样可以传递原生事件

v-model 修饰符

// 输入后的自动转为数值类型

// 输入后的自动去除首尾空格