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

文本插值

<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>

组件之间传递值

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

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

<child-component :property="data"></child-component>

  2. 组件间通信的状态管理Vuex，可以完成组件间的数据通信及状态管理。需要注意的是，vuex中的状态只能通过mutations进行改变

    使用Vuex状态管理进行父子组件通信，定义store.js，并定义state，在state中定义传递的属性比如叫childProperty。然后，在子组件中，使用store.state.childProperty进行使用。

  3. 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,
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342