[TOC]
Vue.js 基础部分包括
- Vue.js的组成 （template, script,style）
- 模板语法（文本属性）、渲染条件v-if 、列表渲染v-for
- 事件处理v-on (@简写)、计算属性computed
Vue.js 核心组件
- 路由组件 vue-router
- 单项数据流 状态管理Vuex
Vue.js 基础
模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
所有语言的模版语法，基本上都是在追求：让你你用个大括号{{data}}就可以把数据展示在页面上。
文本插值
<div class="home">{{msg}}</div>
<script>
export default {
name: 'home',
data () {
return {
msg: 'hello world'
}
}
}
</script>
条件语句 v -if
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-slse>现在你看到我了2</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素,
为true时插入。
可以用 v-else 指令给 v-if 添加一个 "else" 块，跟if 块的逻辑相反。
我们也可以用 v-show 语句展示隐藏元素。
<h1 v-show="seen">Hello!</h1>
-
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
-
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
表单form-双向事件绑定v-model
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
这样输入的数据和data的数据可以同时，动态的更新。
20151109171527_549
<form v-if="isShow">
<div class="item">
菜品名称
<input type="text" v-model="unit.name" />
</div>
</form>
<script>
export default {
data () {
return {
msg: 'hello world',
isShow: true,
unit: {
name: ''
}
}
}
</script>
复选框双向绑定
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
核心组件
路由
我们需要一个vue router库，利用路由实现一个单页面应用。
Runnoob Eg ：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
Js
// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
Vue - cli项目中，我们的router路由配置文件通常在定义在 router.js或者router/index.js 文件中
router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Order from '@/views/Order.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/order',
name: 'order',
component: Order
}
]
const router = new VueRouter({
routes
})
export default router
Main.js初始化
import Vue from 'vue'
import router from '@/router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
这个状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
vuex.png
状态管理（组件传参）
在vue-cli中，store文件（处理/存储/传递状态）位于store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// vuex 维护的数据
lists: []
},
mutations: {
// 组件存数据
setList (state, value) {
state.lists = value
}
}
})
在main.js中初始化
import Vue from 'vue'
import App from '@/App.vue'
import store from '@/store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
在组件1中用store存状态（数据）
export default {
mounted () {
// 重新初始化的时候，会重新赋值，这时候通过vuex取值
this.lists = this.$store.state.lists
},
methods: {
add () {
// 添加unit到sotre中的lists中去
this.$store.commit('setList', this.lists)
}
}
}
在组件2从store的存储取状态（数据）
export default {
name: 'order',
data () {
return {
// 取vuex 中的数据
lists: this.$store.state.lists
}
},
methods: {
minus (item, index) {
item.num--
// vue可以监听 某个对象的变化，而不会监听某个属性的变化，所以需要用set方法
this.$set(this.lists, index, item)
}
}
}
}
</script>
组件之间传递值
-
单向数据流最基本的传参方式
在父组件中，使用component引用子组件，然后使用props属性： <child-component :property="data"></child-component> -
组件间通信的状态管理Vuex，可以完成组件间的数据通信及状态管理。需要注意的是，vuex中的状态只能通过mutations进行改变
使用Vuex状态管理进行父子组件通信，定义store.js，并定义state，在state中定义传递的属性比如叫childProperty。然后，在子组件中，使用store.state.childProperty进行使用。 -
vue-router中组件传参https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
使用router中的Params进行传参（即路径传参） 设置路由/child/:id，当访问到/child/1元素的时候，在子组件中，使用this.$route.params.id的方式进行使用
懒加载新组件
新建组件newComponent.vue，并且在router.js中添加路由/new路径，那么创建路由后，如何配置和使用懒加载进行页面优化？
引用组件后，使用import进行懒加载，定义webpackChunkName，
{path: '/new', components: () => import( /*webpackChunkName: 'new'*/'@/components/newComponent')}
配置了webpackChunkName，可以在router.js头部，按照如下方式进行引用：
const NewComponent = () => import( '@/components/newComponent')
然后配置router.js中的路由：{path: '/new', components: NewComponent}
注意路径与单词的拼写错误问题
计算属性computed
computed和watch方法最大的区别：
computed监视了所有的方法体内实例的属性变化。
计算属性缓存和方法Methods的区别：
computed是会自动触发的，是一种响应式的。
Methods中的方法需要我们执行这个方法。
如果data中的属性中包裹的是computed中的方法，那么data中就会获得一个被实时监控的属性。
Lodash依赖
https://www.lodashjs.com/
安装 （安装到开发环境）
npm install lodash -S
Eg：
过滤
import _ from 'lodash'
export default {
mounted () {
const aar = _.filter([1, 2, 3], (item) => item > 1)
console.log(aar)
}
}
Result : aar是 大于 1的数。
(2) [2, 3]
0: 2
1: 3
length: 2
Ps 插播： Eslint 格式化保存报错问题
Eslint 格式化保存报错问题
Vs code
: 首选项/setting
打开 setting.json
修改
"editor.formatOnSave": false,
网友评论