初学Vue

一、Vue.js下载

1.Vue在线链接 https://www.bootcdn.cn/

2.Vue官网 https://cn.vuejs.org/
(链接方式同jQuery)

二、JavaScript、jQuery、Vue.js对比

html:

<div id="app">
{{text}}
<div>

js:

/*JavaScript*/
var app=document.querySelector("#app");
app.innerHTML = "hello javascript"

/*jQuery*/
$(function (){
    $("#app").text("hello jquery")
});

/*Vue*/
new Vue({
    el:"#app",
    data:{
        text:"Hello Vue"
    }
})

三、class属性绑定 V-bind

html：

<div id="app">
    <a v-bind:href="url" v-bind:title="title">{{text}}</a>
</div>

js:

new Vue({
    el: '#app',
    data: {
        text:'百度一下',
        title:'百度一下，你就知',
        url:'https://baidu.com'
    }
});

四、循环语句 V-for

html：

<div id="app">
    <ul>
        <li v-for="v in arr">{{v}}</li>
        <li v-for="s in obj">{{s}}</li>
        <li v-for="(val,ind) in arr">
        {{ind}}---{{val}}
        </li>
              <!--数组下标格式（数，下标）-->
    </ul>
</div>

js：

new Vue({
    el:'#app',
    data:{
        arr:[1,2,3],
        obj:{name:"jack",age:18}
    }
})

数组对象
HTML：

<li v-for="value in arrs">
    {{value.num}}
    {{value.name}}
    {{value.price}}
</li>

js:

new Vue({
    el:'#app',
    data:{
        arrs:[
            {num:1,name:'apple',price:3},
            {num:2,name:'banana',price:2},
            {num:3,name:'peach',price:2.5}
        ]
    }
})

v-for做表格
HTML：

<table border="1px solid black" id="tb" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="value in arrs">
            <td>{{value.num}}</td>
            <td>{{value.name}}</td>
            <td>{{value.price}}</td>
        </tr>
    </tbody>
</table>

js：

new Vue({
    el:'#tb',
    data:{
        arrs:[
            {num:1,name:'apple',price:3},
            {num:2,name:'banana',price:2},
            {num:3,name:'peach',price:2.5}
        ]
    }
})