Vue：01.简单使用

2019-04-05  本文已影响0人  Zzmi

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的基本了解
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)

todolist demo

1、项目目录：

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

Project Tree

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

2、vue-cli相关

.vue文件的组成：

使用

vue-cli组件

组件引用 子组件定义样式
上一篇 下一篇

猜你喜欢

热点阅读