vue - 基础(1) Vue基本用法

Vue基本用法

在学习Vue的基本用法之前，我们先简单的了解一些es6的语法

let：

　　特点：1.局部作用域　　2.不会存在变量提升　　3.变量不能重复声明

const：

　　特点：1.局部作用域　　2.不会存在变量提升　　3.不能重复声明，只声明常亮，不可变的量（因为是常量所以在初始化的时候就要赋值）

模板字符串：

　　tab键上面的反引号 ${变量名}来插值

　　let name = "xiaoming"

　　let str = `我是${name}`

箭头函数

　　function(){} == () => {} this的指向发生了改变

1 let add = function (x) {
2         return x
3     };
4     console.log(add(6));
5 
6     let add = (x) => {
7         return x
8     };
9     console.log(add(30))

es6的类

　　原型 prototype  当前类的父类（继承性）

function Vue(name,age) {
        this.name = name;
        this.age = age
    }
    Vue.prototype.showName = function () {
        console.log(this.name)
    };
    var vue = new Vue("xiaoming",18);
    vue.showName()

Vue的介绍

　　前端的三大框架：

　　　　vue：尤雨溪，渐进式的JavaScript框架

　　　　react：Facebook公司，里面的高阶函数非常多，对初学者不友好

　　　　angular：谷歌公司，目前更新到6.0，学习angular需要typescript

　　vue的基本引入和创建

　　　　1.下载

　　　　　　cdn方式：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2.引包

<script src='./vue.js'></script>

3.实例化

<div id="app">
    <!--模板语法-->
    <h2>{{ msg }}</h2>　　
    <h3>{{ "hahaha" }}</h3>
    <h3>{{ 1+1 }}</h3>
    <h4>{{ {"name":"haha"} }}</h4>
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2? "真的":"假的" }}</h2>
    <p>{{ msg2.split("").reverse().join("") }}</p>
    <div>{{ text }}</div>
</div>
<!--引包-->
<script src="./vue.js"></script>
<script>
    //实例化对象
    new Vue({
        el:"#app",//绑定标签
        data:{
            //数据属性
            msg:"黄瓜",
            person:{
                name:"xiaoming"
            },
            msg2:"hello Vue",
            text:"<h2>日天</h2>"
        }
    })
</script>