本文旨在抛砖引玉,让新人快速上手,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 这样;
相关资料: