Vue.js 简介
-
JS框架
-
简化Dom操作
-
响应式数据驱动
第一个Vue程序：（使用Live server插件，开启5500端口）
-
导入开发版Vue.js
-
创建Vue实例对象，设置el、data属性
-
使用模板语法将数据渲染到页面
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，小黑!'
}
})
</script>
el挂载点
作用：设置Vue实例挂载（管理）的元素
Vue实例的作用范围
管理el选项中命中的元素及其后代元素
Vue可以选择其他选择器，但是建议使用ID选择器。因为id选择器一般约定为是唯一的，其他像class等选择器都会命中多个元素，容易造成混淆
Vue可设置其他dom元素，但必须是双标签元素，且不能使用html和body。
data数据对象
Vue中用到的数据会定义在data中，支持简单和复杂的数据类型（字符串、对象、数组），在渲染复杂数据类型时，遵守js语法即可
<div id="app">
{{ message }}
<h2>{{school.mobie}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好！",
school: {
name: "黑马程序员",
mobie: "12345678909"
},
campus: ["beijing", "shanghai", "shenzhen"]
}
})
</script>
v-text指令
作用：设置标签的文本内容，即元素的textContent属性
默认的写法（v-text=""）会替换全部内容，而推荐使用的差值表达式（{{}}）可以替换指定内容，v-text内部支持写表达式，如拼接
<div id="app">
<h2 v-text="message+'拼接'">深圳</h2>
<h2 v-text="info">深圳</h2>
<h2>{{message}}深圳</h2>
<h2>{{info+'+教研部'}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好，小黑!!!!',
info: "前端与移动教研部"
}
})
</script>
v-html指令
作用：设置元素的innerHTML。当内容中有html结构时会解析为标签显示出来。如果是v-text拿到了只能解析出来文本。
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
// content: '黑马程序员',
content: "<a href='http://www.baidu.com'>黑马程序员</a>"
}
})
</script>
v-on指令
作用：为元素绑定事件
使用vue时，事件名不需要写on。即
v-on:click="xxx"
也可以使用vue的语法糖，直接使用@替代“v-on:”，即 @click="xxx"
绑定的方法在methods属性中定义，方法内部通过this关键字访问定义在data里的数据
-
事件绑定的方法写成函数调用的形式，可传入自定义参数，对应在定义方法时，使用形参来接收实参。
-
事件的后面可加上.修饰符对事件进行限制，例如：@keyup.enter 按下enter键触发事件
小demo——简单计数器
类似购物车的商品数量，逻辑简单，有JS基础+vue简单指令即可完成
<div id="app">
<input type="button" value="-" @click="subNum">
<span>{{ number }}</span>
<input type="button" value="+" @click="addNum">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
number: 1
},
methods: ({
addNum: function () {
if (this.number >= 10) {
alert("满啦！再点就溢出来啦！");
} else {
this.number++;
}
},
subNum: function () {
if (this.number <= 0) {
alert("我也是有底线的！");
} else {
this.number--
}
}
})
})
</script>
v-show 指令
作用：根据boolean值切换元素的显示状态
原理是通过修改元素的display属性实现显示隐藏，格式为：v-show="data属性名/表达式"；v-show指令寿面的内容最终都会被解析成boolean值：
<img v-show=">isShow" src="./pic.png" alt="">
<img v-show="age>18" src="./pic.png" alt="">
当表达式中的数据被改变时，对应的元素显示状态会同步更新
v-if指令
作用：通过表达式的boolean值切换元素显示状态
原理是通过操纵dom元素来切换。当ture时，元素存在于dom树中，当false时，从dom树中移除，这是与v-show的最大区别
v-show只是修改元素属性，而v-if直接操纵dom树。操作dom树资源消耗较大，所以频繁切换使用v-show，繁殖使用v-if
<div id="app">
<input type="button" value="切换" @click="toggleIsShow">
<p v-if="isShow">黑马程序员</p>
<p v-show="isShow">黑马程序员 - v-show修饰</p>
<input type="button" value="添加温度" @click="addTemp">
{{temp}}
<h2 v-if="temp>=36">热死啦！！</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
temp: 30
},
methods: {
toggleIsShow: function () {
this.isShow = !this.isShow
},
addTemp: function () {
this.temp++;
}
}
})
</script>
v-bind指令
作用：为元素绑定属性
完整写法 v-bind:属性名 简单写法（省略v-bind） :属性名
动态操作class，可以直接使用对象形式，即：
:class="isActive?'active':''"——:class="{active:isActive}"
由三元表达式形式更改为对象形式
<style>
.active {border: 1px solid red;}
</style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<img :src="imgStc" :title="imgTitle+'!!!'" srcset="" :class="{active:isAtive}" @click="toggleActive">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgStc: "./pic.png",
imgTitle: "黑马程序员",
isAtive: false
},
methods: {
toggleActive: function () {
this.isAtive = !this.isAtive;
}
}
})
</script>
图片切换demo
轮播图，点击按钮切换下一张图
<div id="app">
<input v-show="index!=0" type="button" value="上一张" @click="prev">
<img :src="imgArr[index]" srcset="">
<input v-show="index<imgArr.length-1" type="button" value="下一张" @click="next">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgArr: ["./vue.png", "./github.png", "./touxiang.png", "./yinxiang.png", "douban.png"],
index: 0
},
methods: {
prev: function () {
this.index--;
},
next: function () {
this.index++;
}
}
})
</script>
v-for指令
作用：根据列表数据生成列表结构，一般是数组结构
语法：（item, index） in data
item和index可结合其他指令一起使用，数组数据的变化会实时更新到页面
<div id="app">
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="remove">
<ul>
<li v-for="(item, index) in arr">{{index+1}}黑马程序员校区{{item}}</li>
</ul>
<h2 v-for="item in vegtables" :title="item.name">
{{item.name}}
</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["北京", "上海", "广州", "深圳", "重庆",],
vegtables: [
{ name: "西蓝花炒蛋" },
{ name: "小炒黄牛肉" },
{ name: "西红柿蛋汤" },
{ name: "永新狗肉" }
]
},
methods: {
add: function () {
this.vegtables.push({ name: "清炒黄瓜" });
},
remove: function () {
this.vegtables.shift();
}
}
})
</script>
v-model指令
作用：便捷设置和获取表单元素的值，绑定的数据与表单元素的值相互关联，无论修改谁都会同步数据
小黑记事本Demo
功能：新增、删除、统计、清空、隐藏
记事本：
简单的记事本功能，包括增删、统计、清空
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo"
@keyup.enter="addTodo(todoMsg)" v-model="todoMsg" />
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-if="todoArr.length>=0" v-for="(item, index) in todoArr">
<div class="view">
<span class="index">{{ index+1 }}</span> <label>{{ item }}</label>
<button class="destroy" @click="delTodo(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count"> <strong>{{todoArr.length}}</strong> items left </span>
<button class="clear-completed" @click="clearTodo">
Clear
</button>
</footer>
</section>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var todo = new Vue({
el: "#todoapp",
data: {
todoMsg: "",
todoArr: ["写代码", "吃饭饭", "睡觉谁", "赚钱钱", "上班班"]
},
methods: {
addTodo: function (val) {
//1.追加一个<li>，并将input中的文字传入列表2. 清空input
this.todoMsg = "";
this.todoArr.push(val)
},
delTodo: function (ind) {
//根据index删除
this.todoArr.splice(ind, 1);
},
clearTodo: function () {
this.todoArr = [],
this.isClear = !this.isClear;
}
}
})
</script>
网络应用——axios
封装axjax，使用简单