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>