Vue学习笔记01-Vue基础

目录

• Vue学习笔记01-Vue基础
• Vue学习笔记02-Vue组件
• Vue学习笔记03-Axios
• Vue学习笔记04-Vue路由
• Vue学习笔记05-H5实例百度音乐
• Vue学习笔记06-Vuex
• Vue学习笔记07-Web商城实例

Vue基础

Vue官方文档：https://cn.vuejs.org/v2/guide/syntax.html

1. Vue环境搭建

（1）为什么用框架（Angular,React,Vue)

很多业务逻辑移动到前段实现，Javascript文件会 越来越多，处理也胡变得更加复杂

（2）为什么选择Vue

1.渐进式框架
2.双向数据绑定
3.不需要操作DOM，状态机，状态的改变会引起试图的更新
4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能实现
5.Vue环境构建非常方便，vue-clie指令
6.Vue单文件组成，组件化开发
7.社区非常强大，提供各种各样的插件供我们使用

（3）安装

• 下载并安装nodejs：http://nodejs.cn/download/
• 安装cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装vue脚手架：

$ npm install --global  vue-cli

要安装vue-cli（可以不用安装vue），不然提示vue不是本地命令

（4）新建项目

• 初始化项目

$ vue init webpack my-project

• 填写项目信息
  • Project name vb
  • Project description A Vue.js project
  • Author hanzhichao
  • Vue build standanlone
  • Install vue-router No
  • Use ESLint to lint you code No
  • Set to unit test No
  • Setup e3e tets with Nightwatch No
  • Yes use NPM
• 安装依赖

$ cd my-project
$ npm install

• 运行开发环境

$ npm run dev

什么是npm？
npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

什么是webpack？
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
https://www.cnblogs.com/-walker/p/6056529.html

2. Vue项目结构

入门示例

** main.js入口解释**
src/main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件

模板语法

• 文本：模板 {{ 变量 }} （Mustache语法 ）
• 原始html：v-html="变量" 可以解析DOM

示例：

src/App.vue

<template>
  <div id="app">
    {{ demo }}  <!--只能展示文本-->
    <div v-html="demo"></div>  <!--可以展示html-->
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return { demo: "<h1>第一个Vue Demo</h1>" }
  }, 
  components: {
  }
}
</script>

<style>

</style>

Vue的组件结构

<template>
    html模板区
</template>
<script>
    数据逻辑区
</script>
<style>
    样式区
</style>

项目结构

build/  --- 构建配置文件目录
config/  --- 不同环境配置文件目录
node_modules/  --- 依赖包
src/  --- 源码
    assets/  --- 资源文件目录
    conponents  ---  组件目录
    App.vue  --- Vue的单文件组件 
    main.js  --- 入口函数
static/  --- 静态文件目录
.babelrc  --- babel配置文件
.editorconfig
.gitignore  --- git忽略文件
.postcssrc.js  --- postcss配置文件
index.html  --- 项目根视图
package-lock.json
package.json  --- 依赖包配置
README.md  --- 项目说明

什么是babel？
babel是一个工具链，主要用于将ES6及以上版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

什么是postcss?
postcss是一种基于插件的css编译的工具，类似babel对js的处理，常见的功能如：
1.使用下一代css语法
2.自动补全浏览器前缀
3.自动把px代为转换成rem
4.css代码压缩等等
https://jianshu.com/p/288963680642

什么是ES6?
ES即ECMAScript，是JavaScript中的语法规范。ES6即ECMAScript 6标准语法。

3. Vue基本指令

• 文本：{{ }}
• 原始html：v-html
• 绑定属性：v-bind，简写为:
• 表达式：{{ Javascript表达式 }} （只支持单行表达式语句）
• 条件渲染：
  • v-if v-else v-else-if
  • v-show
• 列表渲染：v-for 支持索引(item,index) 支持遍历数[...]和对象{...} 一般要给出索引v-bind:key="index"来维护顺序状态。
• 事件绑定：v-on 简写为@

v-if和v-show的区别：v-if是添加移除节点，v-show是控制节点的display。
v-if有更改的切换开销，而v-show有更改的初始渲染开销。如果需要频繁切换用v-show较好。如果运行时改变较少，用v-if较好。

示例：
src/App.vue

<template>
  <div id="app">
    {{ demo }}  <!--只能展示文本-->
    <div v-html="demo"></div>  <!--可以展示html-->
    <div class="white" v-bind:class="active" v-bind:data-id="id">Hello</div>  <!--绑定属性-->
    {{ 1+1 }}  <!--使用Javascript表达式-->
    {{ 10>9?'对了':'错了'}}
    {{ [1,2,3].toString() }}
    {{ [1,2,3].push(4) }}
    <div v-if="flag">
      我是条件渲染    <!--条件渲染-->
    </div>
    <template v-if="flag2">  <!--template不会被渲染-->
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </template>
    <template v-else> <!--自动匹配上一个v-if-->
      <p>4</p>
    </template>
    <div v-show="flag2">我是v-show</div>
    <ul>
      <li v-for="item in names">{{ item }}</li> <!--列表渲染-->
    </ul>
    <ul>
      <li v-bind:key="index" v-for="(item,index) in names">{{ index+1 }} - {{ item }}</li> <!--支持使用索引-->
    </ul>
    <ul>
      <li v-bind:key="index" v-for="(obj,key,index) in objs">{{ index+1 }} - {{ key}} : {{ obj }}</li> <!--支持对象遍历-->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return { 
      demo: "<h1>第一个Vue Demo</h1>",
      active: "active",
      id: 19,
      flag: false,
      flag2: true,
      names: ['kevin', 'eric', 'lily'],
      objs: {"name": "kevin", "age": 18},
  }
  }, 
  components: {
  }
}
</script>

<style lang="css">
  .white {
    color: white
  }
  .active {
    background-color: red
  }
</style>

数组更新检测

以下数组操作可以引起视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

而filter()、concat()和 slice()等方法由于不改变原数组，不会引起视图更新。

示例：

<template>
  <div id="app">
    <ul>
      <li v-for="item in names">{{ item }}</li>
    </ul>
    <button v-on:click="addItem" type="button" name="button">添加</button>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      names: ["kevin", "eric", "lily"]
  }
  }, 
  methods: {
    addItem(event){
      this.names.push('superhin')
    }
  }
}
</script>

<style lang="css">
</style>

class与type绑定

• <p v-bind:class="{ active: isActive }">哈哈哈</p> 使用isActive变量
• <p v-bind:class="{ active: 0<10 }">哈哈哈</p> 使用表达式
• <p v-bind:class="[h1, h2]">哈哈哈</p> 使用h1和和两个变量
• v-bind:style='myStyle' 应用myStyle样式 myStyle: {color: 'red'}`

示例：

<template>
  <div id="app">
    <div>
      <p v-bind:class="{ active: isActive }">哈哈哈</p>
      <p v-bind:class="[h1, h2]">哈哈哈</p>
      <p v-bind:style="myStyle">哈哈哈</p>
    </div>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      isActive: true,
      h1: 'hh1',
      h2: 'hh2',
      myStyle: { color: 'red', fontSize: "30px"}
  }
  }, 
  methods: {
    addItem(event){
      this.names.push('superhin')
    }
    
  }
}
</script>

<style lang="css">

</style>

计算属性和观察者

页面中复杂的计算逻辑，如

{{ msg.split('').reverse().join('') }}

应使用计算属性。
示例：

<template>
  <div id="app">
    <p>{{ msg }}</p>
    <p>{{ messageInfo }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return { 
      msg: "hello,world"
  }
  }, 
  computed: {  //计算属性
    messageInfo(){
      return this.msg.split('').reverse().join('');
    }
  }
}
</script>

<style lang="css">

</style>

计算属性和方法的区别，计算属性可以缓存，只要变量不变则不重新计算，方法每次都会重新计算。

4. Vue事件应用

• 监听事件： v-on:click="counter += 1"
• 调用事件函数：v-on:click="func"

export default {
    ...
    data(): {
        msg: "hello"
    }
    methods: {
        func(event) {
            this.msg="world";
        }
    }

• 传递参数：v-on:click="func2('vue')"

export default {
    ...
    methods: {
        ...,
        func2(text) {
            console.log(text);
        }
}

• 事件修饰符（修饰符可以串联）
  • .stop：阻止单击事件继续传播
  • .prevent：提交事件不再重载页面
  • .capture：内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  • .self：只对当前元素生效
  • .once：点击事件将只会触发一次
  • .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发
• 按键修饰符 v-on=keyup.enter="submit"
  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

监听事件示例：

<template>
  <div id="app">
    <button v-on:click="counter += 1" type="button" name="button">按钮</button> 
    {{ counter }}
    <div>
      <button v-on:click="clickHandler" type="button" name="button">第二按钮</button>
      {{ eventShow }}
    </div>
    <button v-on:click="dataevent(content,$event)" type="button" name="button">第三按钮</button>
    <input v-on:keyup.enter="getInfo"/>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      counter: 1,
      eventShow: "我是孙悟空",
      content: "为师寂寞了"
  }
  }, 
  components: {
  },
  methods: {
    clickHandler(event){
        console.log('事件');
        this.eventShow="我是六耳猕猴";
    },
    dataevent(data){
      console.log(data);
    },
    getInfo(event){
      // if(event.keyCode === 13) {
      //   console.log('你按了回车键');
      // }
      console.log('你按了回车键');
      
    }
  }
}
</script>

<style lang="css">

</style>

5. Vue双向数据绑定

表单输入绑定：v-model

• 文本框/文本域：input/textarea v-model="msg"
• 单选/复选框：多个选项v-model使用同一个值
• 下拉框：在select处设置 select v-model="selected"

修饰符

• .lazy：v-model.lazy 不是每输入一个就改变
• .number：转为数字
• .trim：不处理空白字符
  示例：
  src/App.vue

<template>
  <div id="app">
    <input v-model.lazy="msg" type="text" name="" >
    <p>{{ msg }}</p>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      msg: "hello",
  }
  }, 
  components: {
  },
  methods: {

  }
}
</script>

<style lang="css">

</style>