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


<div v-html="template">div>


<div v-bind:id="id">div>
<div :id="id">div>


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

条件渲染

<div v-if="visableA">我出来了001div>
<div v-else-if="visableB">我出来了002div>
<div v-else>我出来了003div>






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