Vue笔记(一)

CDN库http://www.bootcdn.cn/

<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

还可以下载源代码，用本地文件导入Vue.min.js

<script src="vue-dev/dist/vue.min.js"></script>

Vue.js使用了基于HTML的模板语法

文本插值，最常见的形式就是{{code}}

<div id="app">    <p>{{code}}</p></div><script type="text/javascript">    var app=new Vue({    el:"#app",    data{        code:"hello,vue!"        }    })</script>

v-html可以输出html代码类似innerHTML

<div id="app">    <div v-html="message"></div></div><script type="text/javascript">    var app=new Vue({    el:"#app",    data:{    message:"<h1>Hello,vue</h1>"    }    })</script>

v-bind可以改变HTML属性中的值

//类名为background<div id="app">    <div v-bind:class="{background:isActive}">666</div></div><script type="text/javascript">    var app=new Vue({    el:"#app",    data:{    isActive:true}})</script>

Vue.js提供了的Js表达式支持

<div id="app">{{"博"+"主"}}{{AmIHandsome?"is":"is not"}}{{message.split("").reverse().join("")}}</div><script type="text/javascript">    var app=new Vue({    el:"#app",    data:{    AmIHandsome:true,    message:"emosdnah"}})</script>

v-if是vue的条件判断语句，通过判断v-if的值是否为true来决定是否插入这个元素，还可以
让<template></template> 中的内容显示，v-show也可以显示但是不支持template语法

<div id="app">    <p v-if="seen">博主的帅气蒙蔽了你们的双眼</p>    <section v-if="ok">        <h1>看不见代表被蒙蔽了双眼</h1>        <p>看见了表示你们赞同了博主的帅气</p>    </section></div> <script>    var app=new Vue({    el:"#app",    data:{        seen:true,        ok:true    }})</script>

当然有v-if，肯定还有v-else

<div id="app">    <div v-if="false">        Wow~    </div>    <div v-else>        Hey man~    </div></div><script>    var app=new Vue({        el:"#app",        data:{            false:false    }})</script>

vue 2.1以上的版本都有v-else-if

<div id="app">    <div v-if="author==='ugly'">ugly</div>    <div v-else-if="author==='handsome'">handsome</div>    <div v-else-if="author==='beautiful'">beauty</div>    <div v-else>Just so so</div></div><script>    var app=new Vue({    el:"#app",    data:{        author:"handsome"}})</script>

有了选择，肯定还有循环吧，v-for语句是 items in arr形式的特殊语法，类似 li in ul

//输出1-12<div id="app">    <p v-for="n in 12">{{n}}</p></div><script>    var app=new Vue({        el:"#app"})</script>//渲染一个列表<div id="app">    <ul>        <li v-for="items in arr">            {{items.text}}        </li>    </ul></div><script>    var app=new Vue({        el:"#app",        data:{        arr:[        {text:"我是1"},        {text:"我是2"},        {text:"我是3"}        ]    }})//结果会ul里有3个li,而不是ul下的li中有3个li</script>

v-for还可以用来迭代对象

<div id="app">    <ul>        <li v-for="(value,key,idnex) in object">            {{index}}-{{key}}:{{value}}        </li>    </ul></div><script>    var app=new Vue({        el:"#app",        data:{            object:{                name:"jack",                age:21            }        }})</script>//0-name:jack//1-age:21