本文旨在抛砖引玉，让新人快速上手，Vue.js更多强大的功能还需慢慢发掘...
①引用vue.js文件(以下二选一)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
②将data里的数据利用模板{{ 参数名称 }}输出，v-text输出字符串，v-html输出DOM标签及内容和效果
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<span>{{ msg + ' !!!' }}</span><br />
<span>{{ num + 1 }}</span><br />
<span v-text='txt'></span><br />
<span v-html='htm'></span><br />
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "hello word",
num:1,
txt:"<b>ABCDEFG</b>",
htm:"<b>ABCDEFG</b>"
},
});
</script>
本例参数名称为：msg，其值为：hello word，模板为：{{ msg + ' !!!' }}，输出：hello word !!!
本例参数名称为：num，其值为：1，模板为：{{ num + 1 }} ，输出：2
说明：{{模板}} 不仅仅支持字符串的拼接，还支持数字的计算 等
v-text 会替换标签<?></?>内所有文本，而且是纯文本，哪怕是包含了html标签的字符串，也会输出html的标签
v-html会替换标签<?></?>内所有文本，如果文本包含了html标签，则这些标签会被渲染成html的DOM元素
如本例中，参数txt和htm的内容都是:"<b>ABCDEFG</b>"，
v-text则会显示出<b>和</b>这字符串，而且没有加粗字体的效果，输出：<b>ABCDEFG</b>
v-html就不会显示<b>和</b>这些标签，并且将b标签内的字符串“ABCD”加粗显示，输出：ABCDEFG
{{ 模板 }} 和 v-text、v-html 之间的区别：
{{ 模板 }} 只会将标签内变量所在的位置，进行内容的拼接或计算，变量以外其他的内容不会改变
v-text、v-html 会将标签内所有的内容都替换成变量的值，原标签内的所有内容都会被改变
③显示和隐藏 v-show 属性，若 v-show的值为false,则当前div的 style="display:none";v-if的值为false,则v-if所在的html代码不存在
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<span v-show="show">{{ msg + ' !!!' }}</span>
<span v-if="num > 5">{{ msg + ' ???' }}</span>
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
msg: "hello word",
show: false,
num: 5
},
});
</script>
v-if 和 v-show 的区别：
v-show 只是控制html标签的style的display值，html的标签还是妥妥的存在的。
v-if 如果等于false的话，连html标签这个DOM对象都没有(也就是少了几行html代码)。
如果页面要频繁切换一个DOM对象的显示、隐藏，推荐用 v-show 。
在 v-show 和 v-if 后的 =" " 内，除了直接赋bool型的值之外，还可以添加判断条件，如：v-if="num > 5" 来控制是否显示
④绑定事件用：v-on:+事件名称 或者 @+事件名称="函数名称"，如@click="函数"，调用事件的函数方法在methods中实现，
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click="myShow">显示|隐藏</button>
<span v-show="show">{{ msg + ' !!!' }}</span>
<span v-if="show">{{ msg + ' ???' }}</span>
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
msg: "hello word",
show:true
},
methods: {
myShow: function () {
this.show = !this.show;
}
}
});
</script>v-on:click="myShow" 可以简写为 @click="myShow" 效果一样的
实例内部引用本实例中的参数用，取值：var str = this.参数名; 赋值：this.参数名 = 新值;
实例外部调用实例中参数用：实例对象.参数名，如，取值：var str =vv.show; 赋值： vv.show = false;
⑤用v-for循环加载数组或List对象。v-for所在的html标签块就是循环模板，例1：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, key, index) in items">{{key}}：{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: {
name: "Jerry",
age: 18,
heigth: 173,
weight: 68
}
}
})
</script> 
例2：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<table border="1">
<tr>
<th>ID</th>
<th>name</th>
<th>age</th>
<th>heigth</th>
<th>weight</th>
</tr>
<tr v-for="(item,index) in items">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.heigth}}cm</td>
<td>{{item.weight}}kg</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
items:
[
{
name: "Jerry",
age: 18,
heigth: 173,
weight: 68
},
{
name: "Marry",
age: 16,
heigth: 168,
weight: 48
},
{
name: "Carry",
age: 22,
heigth: 170,
weight: 52
},
{
name: "Hurry",
age: 25,
heigth: 177,
weight: 79
},
]
}
})
</script> 
v-for，一个参数写法： v-for="item in items" 其中：item是items中的一个值，或者一个对象
v-for，两个参数写法：v-for="(item, index) in items" 其中：index是对象item的下标(从0开始)
v-for，三个参数写法：v-for="(item, key, index) in items" 其中：key是对象item的属性名称(不适用于纯粹的数组)
两个和三个的参数的顺序不能颠倒，切记!! 不能写成：v-for="(item, index, key) in items" 这样(不报错，但含义错误)
纯粹的数组，如字符串数组{"aa","bb","cc"}，则 item 直接就是"aa"或"bb"或"cc" 的具体值
实体类数组，则item是数组中的一个对象，取值方法：item.属性名，如：item.name、item.age 等等
⑥v-model双向绑定表单控件的值; v-on:事件修饰 ,v-on:事件名称.修饰符，如: v-on:keyup.enter，只有enter键才响应keyup事件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="txt" @keyup.enter="showTxt" />
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
txt: ""
},
methods: {
showTxt:function(){
alert(this.txt);
}
}
});
</script>
本例，html表单text，利用 v-model绑定了data中的一个变量txt，text所输入的值会改变其所绑定的变量txt的值，获取txt的值就是表单text的值。
双向绑定：表单text的值发生改变，则data的参数txt的值也会发生改变。改变data的txt的值，则页面的text控件内的值也发生改变。
v-on:事件修饰 ,如本例: @keyup.enter，在表单text中输入文字后按下回车键响应keyup事件，调用showTxt函数。
⑦v-bind 绑定html标签属性 ,如 img 的 src属性 可以用 v-bind:str="参数名"，则将参数对应的值赋给了img的str
<style>
.cssImg {
width: 100px;
height: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<img v-bind:src="imgUrl" v-bind:title="imgAlt" v-bind:class="imgClass" />
</div>
<script>
var vv = new Vue({
el: "#app",
data: {
imgUrl: "img/1.jpg",
imgAlt: "头像1",
imgClass: "cssImg"
}
});
</script>
v-bind:src="imgUrl" v-bind:title="imgAlt" v-bind:class="imgClass" 可以简写为：
:src="imgUrl" :title="imgAlt" :class="imgClass"
⑧Vue.js + jQuery的AJAX 调用后台数据：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="app">
<input type="text" width="150px" v-model="txtName" @input="input" v-bind:placeholder="tips">
<div class="div1" v-show="showDiv">
<ul>
<li v-for="item in listName" @click="selectName(item)">{{item}}</li>
</ul>
</div>
</div>
<script>
var myVue = new Vue({
el: "#app",
data: {
showDiv: false,
txtName: "",
listName: [],
tips: "请输入：张"
},
methods: {
input: function () {
myVue.listName.splice(0, myVue.listName.length);
if (myVue.txtName.replace(" ", "") == "") {
myVue.showDiv = false;
return;
}
$.ajax({
type: "get",
url: "names.html",
success: function (res) {
var arr = res.split(",");
for (i in arr) {
if (arr[i].indexOf(myVue.txtName) >= 0) {
myVue.listName.push(arr[i]);
myVue.showDiv = true;
}
}
}
});
},
selectName: function (selName) {
this.txtName = selName;
this.showDiv = false;
}
}
});
</script>
本例 $.ajax({...}); 就是jQuery的AJAX，它将后台获取到的值，传递给myVue对象的listName参数变量中去；
在vue实例外部调用vue实例中参的数用：实例对象.参数名，如：myVue.listName 、 myVue.showDiv 这样；
相关资料：
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
