Vue 入门2 基础篇

[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}}就可以把数据展示在页面上。

文本插值

{{msg}}

条件语句 v -if


    现在你看到我了
    现在你看到我了2

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素,

为true时插入。

可以用 v-else 指令给 v-if 添加一个 "else" 块，跟if 块的逻辑相反。

我们也可以用 v-show 语句展示隐藏元素。

Hello!

相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

表单form-双向事件绑定v-model

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。

这样输入的数据和data的数据可以同时，动态的更新。

20151109171527_549

  
        
          菜品名称

复选框双向绑定


  单个复选框：
  
  {{ checked }}
    
  多个复选框：
  
  Runoob
  
  Google
  
  taobao
  

  选择的值为: {{ checkedNames }}

核心组件

路由

我们需要一个vue router库，利用路由实现一个单页面应用。

Runnoob Eg ：


  Hello App!
  
    
    
    
    Go to Foo
    Go to Bar

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
 
// 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)
    }
    }
  }
}

组件之间传递值

单向数据流最基本的传参方式

在父组件中，使用component引用子组件，然后使用props属性：

组件间通信的状态管理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/

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,