Vue学习笔记

node.js版本管理工具：nvm

# 查看本地已安装的node环境列表
nvm ls
# 查看远端可用的node环境列表
nvm ls-remote
# 在线安装新环境
nvm install v10.0.0
# 切换版本
nvm use

# 推荐安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli工具

npm install -g vue-cli

创建项目的三种方式

• vue init webpack hello-vue
  vue2.x的方式
• vue create hello-vue
  vue3.x的方式
• vue ui （Vue项目管理器）
  vue3.x的方式

如果因为网络原因失败，可以进到工程目录，用cnpm再安装一次：cnpm install

hello word

<div class="bg">
{{msg}}
</div>
<script src="vue cdn地址"></script>
<script>
	new Vue({
		el: '.bg',// class绑定，id绑定使用#id
		data: {
			msg: 'hello vue'
		}
	}) 
</script>

模板语法

<!-- 支持数学运算 -->
{{(count + ) * 10}}

<!-- v-html的使用，这里template为一段html代码，如：<div>666</div> -->
<div v-html="template"></div>

<!-- v-bind的使用，有以下两种写法 -->
<div v-bind:id="id"></div>
<div :id="id"></div>

<!-- v-on的使用，也有以下两种写法 -->
<button v-on:click="todo"></button>
<button @click="todo"></button>

计算属性（computed）与侦听器（watch）

使用场景：

• watch：异步场景
• computed：数据联动

<script>
new Vue({
  data: {
    msg: 'hello vue',
    another: 'another hello'
  },
  watch: {
    // 当msg的值发生变化的时候就会执行，只监听msg的值
    msg(newval, oldval) {
      console.log(newval)
      console.log(oldval)
    }
  },
  computed: {
    // 只要里面包含的值（本实例的值）发生了变化，这个方法就会执行
    msg_test() {
      console.log(this.msg)
      console.log(this.another)
    }
  }
})
</script>

条件渲染、列表渲染、Class与Style绑定

条件渲染

<!-- v-if，条件渲染 -->
<div v-if="visableA">我出来了001</div>
<div v-else-if="visableB">我出来了002</div>
<div v-else>我出来了003</div>

<!-- v-show，条件渲染 -->
<!-- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display -->
<!-- v-if一开始不会被渲染 -->
<!-- v-if有更高的切换渲染开销，v-show有更高的初始渲染开销 -->

<script>
new Vue({
  data: {
    visableA: false,
    visableB: true,
  }
})
</script>

列表渲染

<div v-for="item in list">{{item}}</div>
<script>
new Vue({
  data: {
    list: [1,2,3,4,5]
  }
})
</script>

Class与Style绑定

<div :style="myStyle">{{msg}}</div>
<script>
new Vue({
  data: {
    msg: 'hello vue',
    myStyle: {
      color: 'red'
    }
  }
})
</script>

组件化思想

什么是组件化

• 独立的
• 可复用的
• 整体化的

为什么要组件化

• 实现功能模块的复用
• 高执行效率
• 开发单页面复杂应用

如何进行拆分

• 300行原则
• 复用原则
• 业务复杂性原则

组件化带来的问题

• 组件状态管理（vuex）
• 多组件的混合使用，多页面，复杂业务（vue-router）
• 组件间的传参、消息、事件管理（props、emit/on、bus）

风格指南

【官方】Vue风格指南

vue-route介绍

用法

传参方式

<!-- 其一，这种方式页面刷新的时候会找不到参数 -->
<script>
this.$router.push({
  name: 'name',
  params: {
    id: 'id'
  }
})

var id = this.$route.params.id
</script>
<!-- 其二，这种方式可以支持页面刷新 -->
<script>
this.$router.push({
  name: 'name',
  query: {
    id: 'id'
  }
})

var id = this.$route.query.id
</script>