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

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：滚动事件的默认行为 (即滚动行为) 将会立即触发
• 按键修饰符
  • .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>

[更新中]Vue全套精品课笔记

原文：https://www.cnblogs.com/superhin/p/12283766.html