一、第一个Vue.js程序
1.如何引入 Vue
创建一个 .html 文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告,完整版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者是:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
其他关于更多安装 Vue 的方式,如:node.js构建工具,这里不推荐新手入门直接使用,有点麻烦。
2.声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
这样保存html文件,可以获得如下效果:
一些解释:
el:挂载点,Vue会管理el选项命中元素及内部的后代元素,el后为选择器,可以使用其他选择器,但是一般推荐使用唯一的ID选择器。
对于vue,一般挂载到双标签上,但是不能载在HTML和BODY等标签上。
data:数据对象,Vue中用到的数据定义在data中,data中可以写复杂类型的数据(例如对象,数组等),而挂载渲染复杂数据时,遵守JS语法即可,如对象{name:···,····} 用 ‘.’ ,数组用索引。
二、Vue指令(以v-开头的一些特殊语法)
1.v-text(设置标签的文本值)
<div id="app1">
{{ message + " by zyk~" }}
</div>
<div id="app2" v-text="message+ ' by zyk~'">---------hhhh--------</div>
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
message: 'Hello Vue!'
}});
var app2 = new Vue({
el: '#app2',
data: {
message: 'Hello v-text!'
}
})
</script>
效果如下:
(注意:使用v-text会覆盖掉挂载元素内部的文本,如果只想更换部分文本,可以尝试:
不想替换的文字{{message}},而字符串的拼接类似js,不过使用v-text拼接字符串使用的是‘’)
2.v-html(设置标签的innerHtml)
不同于v-text,v-html会解析具有html结构的文本:
<div id="app">
<p v-html="content"> <span>Yes</span></p>
<p v-text="content"> <span>Yes</span></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
content: "<a href='#''>Hello Vue!</a>"
}});
</script>
网页效果:
3.v-on
绑定事件
<div id="app">
<input type="button" value="事件绑定" v-on:click="yes">
<input type="button" value="事件简写" @click="yes">
<h1 v-text="food" @click="fd"></h1>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
food:"香蕉"
},
methods:{
yes:function(){
alert("yes");
},
fd:function(){
this.food += "好吃!"
}
}
});
</script>
v-on用于为元素绑定事件;
后面的响应事件无需写on;
指令可以简写为@;
绑定的方法定义在vue的methods属性中;
使用this可以访问元素内部的数据;
网页效果:
补充:v-on还有传递事件参数,事件修饰符:
<div id="app">
<input type="button" value="事件绑定" v-on:click="yes(p1,p2)">
<input type="text" @keyup.enter="yes"> <!---回车--->
<h1 v-text="food" @click="fd"></h1>
</div>
<!---更多修饰语法见cn.vuejs.org/v2/api/#v-on---->
4.v-show
根据表达式的真假,切换元素的显示和隐藏
v-show本质是切换display属性,为false时切换display为none
<div id="app">
<input type="button" value="-" v-on:click="sub">
<span v-text="number"></span>
<input type="button" value="+" @click="add">
<!--v-show本质是切换display属性,为false时切换display为none-->
<img src="angel.jpg" width="50px" height="50px" v-show="number>=18">
</div>
<script>
var app = new Vue({
el: '#app',
data:{
number:20,
},
methods:{
sub:function(){
if(this.number > 0) this.number--;
else alert("最小为0");
},
add:function(){
if(this.number < 20) this.number++;
else alert("最大为20");
}
}
});
</script>
效果:
5.v-if
根据表达式的真假,切换元素的显示和隐藏(不是通过样式,而是通过操纵dom元素)
换言之,v-show控制的元素始终在html中,而v-if控制的元素会被移除和添加~
选择:
·对频繁操作的元素用v-show,因为操作dom树性能效耗更大
6.v-bind
设置元素的属性
使用方式:v-bind:属性名=表达式 or :属性名=表达式(省略v-bind)
补充:对于类名的设置可以写成: :class="{类名:isTrue}"
7.v-for
根据数据生成列表结构
经常和数组结合使用
语法为(item,index) in arr
<div id="app">
<ul>
<li v-for="(item,index) in arr">
<div :id="'li'+item.num">{{item.num}},{{index}} </div>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr:[{num:1},{num:2},{num:3},{num:4},{num:5}]
}});
</script>
效果:
8.v-model
获取和设置表单元素的值(双向数据绑定,表单元素是指input,button一类)
<div id="app">
<input type="text" v-model="message">
<p v-text="message"> </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:"啦啦啦"
}});
</script>
效果:
三.Vue的网络开发axios
1.引入axios库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!---文档传送门 github.com/axios/axios-->
2.使用axios的get方法
axios.get("http://your接口").then
(function(res){
that.message = res.data;
console.log(that.message );
},function(err){
console.log(err);
})
参考视频:
黑马程序员-4个小时带你快速入门vue