web前端框架vue试水
一、第一个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: "Hello Vue!"
}});
</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