Vue：01.简单使用

ESMAScript（ES6语法简单补充）

1、let和const

var声明的变量会暴露在全局作用域中，可以不断重新赋值

var a = [];
for (var i=0; i<10; i++){
    console.log(i);
};
a[6]();    // 结果为10

var声明的变量，存在变量提升问题

console.log(a);    // undefined
var a = 12;
// ====等同于====
var a;
console.log(a);
a = 12;

let声明的变量是块级作用域，不能重复声明（只声明一次）

var a = [];
for (let i=0; i<10; i++){
    console.log(i);
};
a[6]();    // 结果为6

let声明的变量，不存在变量提升

console.log(a);    // 报错ReferenceError
let a = 12;

const声明一个只读的变量(即: 常量)，一旦声明立即初始化(不能留到以后赋值)。常量的值不能改变

const PI = 3.1415;
PI    // 3.1415
PI = 3;    // TypeError: Assignment to constant variable
const a;    // SyntaxError: Missing initializer in const declaration

2、模板字符串（标志：“ ` ` ”）

// 字符串拼接，``内进行拼接
$('#str').append(`
    <div>
        <p>${p.content}</p>
        <a>${a.context}</a>
    </div>
`);

3、箭头函数

var f = () => 5;
// ====无形参时，等同于====
var f = function(){
    return 5;
}
// -----------------------
var f = a => a;
// ====一个形参时，等同于====
var f = function(a){
    return a;
}
// -----------------------
var sum = (a, b) => a + b;
// ====多个形参时，等同于====
var sum = function(a, b){
    return a + b;
}

使用箭头函数存在两个问题：
1、函数内部调用this时，指向了浏览器挂载的windows对象；
2、对函数传参时，arguments对象不能使用

// 字面量方式创建对象
var person = {
    name: 'aa',
    foo:function(){
        console.log(this)    // this指使用时定义的person对象
        console.log('this is a test');
    }
}
person.foo();

// 箭头函数创建对象
var person = {
    name: 'aa',
    foo:() => {
        console.log(this)    // 使用箭头函数，this指定义时使用的windows对象
        console.log('this is a test');
    }
}
person.foo();

4、对象的单体模式（标志：foo(){}）

// 自变量方式创建对象
var person = {
    name = 'aa',
    fav(){
        console.log(this);
    },    // 等价于 ===》 fav: function(){ console.log(this); },
}
person.fav();

5、ES6的面向对象

// ES5使用构造函数方式创建对象（即面向对象，关键字必须大写）
function Animal(name, age){
    this.name = name;
    this.age = age;
}
Animal.prototype.showName = function(){    // 添加方法
    console.log(this.name);
}
var cat = new Animal('肥嘟嘟', 2);    // 实例化对象必须用new

// ES6以class定义对象（每个方法结尾都不能加逗号）
class Animal{
    constructor(name, age){    // 构造器函数
        this.name = name;
        this.age = age
    }    // 不能加逗号
    showName(){
        console.log(this.name)
    }
}
var d = new Animal('肥嘟嘟', 2);
d.showName();

6、模块化

ES6的模块化的基本规则或特点：
1、每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
2、模块内部的变量或者函数可以通过export导出；
3、一个模块可以导入别的模块
4、每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取（类似Python包加载模式）。 一个模块就是一个单例，或者说就是一个对象。

Vue-cli脚手架使用（2.x和3.x）

1. vue-cli 2.x

1.1 配置node.js环境，cmd命令行中输入node --version测试是否安装成功
npm是Node.js提供的包管理工具，因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，我们可以用淘宝npm镜像cnpm代替默认的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
1.2 安装vue-cli：cnpm install vue-cli -g
1.3 生成项目

$ vue init webpack '项目名'   # 项目名会在当前目录下生成
$ cd '项目名'
$ cnpm install          # 安装依赖 node_modules
$ npm run dev           # 启动项目，默认为localhost:8080端口
$ npm run build         # 把项目打包，放到服务器使用

2. vue-cli 3.x

2.1 配置node.js环境，vue-cli 3.x 要求node的版本需要8.9甚至更高版本
2.2 安装vue-cli：

# 全局安装vue-cli
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

2.3 创建一个基于webpack模板的新项目

$ vue init webpack monitor
# OR
$ vue create monitor
# OR
$ vue ui
# 安装依赖
$ cd monitor
$ npm run dev
# 打包部署
$ npm run build

“Vue是面向数据编程，不是面向dom编程”

1. Vue的基本了解

• 创建Vue对象后要指名挂载点：el: "#app"
• 插值表达式：{{msg}}
• 数据占位符：{{data}}，对应data属性的key；
• 数据模板（指令）：v-text和v-html，对应data属性的key，使用方法同数据占位符，其中：v-text会对html语句进行转义直接输出，v-html则是将html语句内容输出；
• dom模板：template属性能输出dom模板；
• 绑定事件：v-on:click="方法名"，简写为@click。事件对应methods属性中的 方法名： fun

2. Vue中的属性绑定(v-bind)和双向数据绑定(v-model)

<div id="app">
    <div v-bind:title="title">user</div>    // v-bind:value == :value
    <input v-model="content"/>
    <div></div>
</div>

new Vue({
    le: "#app",
    data: {
        title: "this is Test",
        content: "content!!!"
    }
})

3. Vue中的计算属性(computed)和侦听器(watch)

• v-if和v-show：这两个属性用来控制dom显示/隐藏，当值为true则显示，为false则隐藏。
• v-if和v-show的区别：在于v-if是通过直接销毁dom的方式实现隐藏，而v-show是false时通过在标签内，加入一个display=none来隐藏dom实现的。所以v-show比v-if的性能更高，适用于对DOM高频率的操作
• v-for：主要用于遍历数组数据，并自动生成dom列表。如v-for='(item, index) of list' 。加一个key属性可以加快渲染速度，但key的值必须唯一（如Python字典）

todolist demo

1、项目目录：

注意：启动本地没有的项目前，需要先执行npm install，把项目相关的依赖包下载完，再npm run dev启动项目，避免项目缺少依赖而启动失败。

Project Tree

build—项目的webpack配置文件
config—项目线上环境和开发环境的配置文件
node_modules—项目的依赖模块
src—源代码放置目录 src中的main.js文件是整个项目的入口文件
static—静态的资源文件

2、vue-cli相关

.vue文件的组成：

• <template></template>模板
  template模板里面只能有一个包裹元素，最外部用一个<div>包裹
• <script></script>逻辑
• <style></style>样式

使用

vue-cli组件

• 在vue-cli中data现在是函数，并且需要return返回具体数据。可以通过更改入口文件的引用实例来改变加载页面

组件引用

• 组件引用：用import导入组件，再用components对局部组件进行一个声明。

  
  子组件

• 父组件向子组件传值：在子组件标签中绑定添加:属性名=值；子组件则用props: ['属性名']进行声明，然后直接使用

• 子组件 this.$emit('事件名',参数值)向父组件请求某事件执行，父组件通过@事件名=函数名，来进行事件监听触发调用事件函数。

子组件定义样式

• scoped修饰符的使用：组件样式作用域，通过在style上添加scoped标签将作用域限制到本组件中。如果不添加该标签，则将变为全局样式