01-demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
// let ele = document.getElementById("app");
// ele.innerText = "hello";
const app = new Vue({
el: "#app",
data: {
name: "alex"
}
})
</script>
</body>
</html>
02-v-text以及v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-text="name"></h2>
<h3 v-text="age"></h3>
<h3>他的爱好是</h3>
<div v-html="hobby">
</div>
</div>
<script>
// 先获取h2标签
// innerText
// innerHtml
const app = new Vue({
el: "#app",
data: {
name: "夏雨豪",
age: 18,
hobby: `<ul>
<li>学习</li>
<li>舔狗</li>
<li>吸猫</li>
</ul>`
}
})
</script>
</body>
</html>
03-v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(course, index) in course_list" :key="index">{{course}}{{index}}</li>
</ul>
<ul>
<li v-for="(stu, index) in s1">{{stu.name}}{{stu.age}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
course_list: ["Python", "Linux", "Vue", "Go"],
s1: [
{
name: "袁承明",
age: 19
},
{
name: "李沁洋",
age: 20
}
]
}
})
</script>
</body>
</html>
04-v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_active {
200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{my_active: is_show}">
</div>
<img :src="my_src" alt="">
</div>
<script>
const app = new Vue({
el: "#app",
data: {
is_show: false,
my_src: "https://hcdn1.luffycity.com/static/frontend/activity/banner-PC7%E5%A4%A9%20(1)_1542264332.6512344.png"
}
})
</script>
</body>
</html>
05-v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="my_click('打游戏')" v-on="{mouseenter: my_enter, mouseleave: my_leave}">点击弹出look</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
},
methods: {
my_click: function (x) {
alert("luke" + x)
},
my_enter: function () {
console.log("鼠标移入事件")
},
my_leave: function () {
console.log("鼠标移出事件")
}
}
})
</script>
</body>
</html>
06-v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'admin'">管理员你好</div>
<div v-else-if="role == 'hr'">查看简历</div>
<div v-else>没有权限</div>
</div>
<script>
// appendChild
const app = new Vue({
el: "#app",
data: {
role: "admin"
}
})
</script>
</body>
</html>
07-v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="admin">管理员你好</div>
<div v-show="hr">查看简历</div>
<div v-show="others">没有权限</div>
<button @click="my_click">点击显示或隐藏</button>
<h2 v-show="is_show">吴栋</h2>
</div>
<script>
// display
const app = new Vue({
el: "#app",
data: {
admin: true,
hr: false,
others: false,
is_show: false
},
methods: {
my_click: function () {
this.is_show = !this.is_show
}
}
})
</script>
</body>
</html>
08-v-mode以及指令修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy.trim="username">
{{username}}
<pre>{{username}}</pre>
<hr>
<input type="text" v-model.lazy.number="phone">
{{phone}}
{{typeof phone}}
<textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
{{article}}
<select name="" id="" v-model="choices" multiple>
<option value="1">xiayuhao</option>
<option value="2">yaunchengming</option>
<option value="3">liqinyang</option>
</select>
{{choices}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
username: "",
article: "",
choices: ["1"],
phone: ""
}
})
</script>
</body>
</html>
09-自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box {
200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div class="my_box" v-pin.left.bottom="pinned">
</div>
<h1 v-my_text="name"></h1>
</div>
<script>
Vue.directive("pin", function (el, binding) {
console.log(el);
// el 是我们绑定指令的标签元素
console.log(binding);
// binding 指令的所有信息
let gps = binding.modifiers;
// {right: true, top: true}
if(binding.value){
// 给div定位到浏览器的右下角
el.style.position = "fixed";
// el.style.right = 0;
// el.style.bottom = 0;
for(let posi in gps){
el.style[posi] = 0;
}
}
else {
el.style.position = "static";
}
});
// 自定义的v-text
Vue.directive("my_text", function (el, binding) {
el.innerText = binding.value;
});
const app = new Vue({
el: "#app",
data: {
pinned: true,
name: "gaoxin"
}
})
</script>
</body>
</html>
01-获取DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div ref="my_box"></div>
<button v-on:click="my_click">点击显示文本</button>
</div>
<script>
const app = new Vue({
el: "#app",
methods: {
my_click: function () {
// 给div标签加入文本
let ele = this.$refs.my_box;
console.log(ele)
ele.innerText = "夏雨豪"
}
}
})
</script>
</body>
</html>
02-计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input type="text" v-model.number="python"></td>
</tr>
<tr>
<td>Django</td>
<td><input type="text" v-model.number="django"></td>
</tr>
<tr>
<td>Mysql</td>
<td><input type="text" v-model.number="mysql"></td>
</tr>
<tr>
<td>总分</td>
<td>{{total}}</td>
</tr>
<tr>
<td>平均分</td>
<!--<td>{{(python+django+mysql)/3}}</td>-->
<td>{{average}}</td>
</tr>
</tbody>
</table>
{{sum}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
python: "",
django: "",
mysql: "",
sum: this.python + this.django + this.mysql,
// sum: null
},
methods: {
},
computed: {
total: function () {
return this.python + this.django + this.mysql
},
average: function () {
return this.total/3
}
}
})
</script>
</body>
</html>
03-数据的监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{name}}
<br>
{{hobby}}
<br>
{{obj}}
<br>
<button @click="my_click">点我改变数据</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "夏雨豪",
hobby: ["舔狗", "烫头"],
obj: {
girl: "李文周",
age: 36
}
},
methods: {
my_click: function () {
// 修改数据
// this.name = "夏雨荷";
// this.hobby.push("腹黑")
// this.hobby[0] = "吸猫";
// console.log(this.hobby)
// app.$set(this.hobby, 0, "吸猫")
// this.obj.age = 18;
// this.obj["sex"] = "女";
app.$set(this.obj, "sex", "女")
}
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
// 可以通知乾隆~~
}
},
hobby: {
handler: function (val, oldVal) {
// 改变数组的长度的时候新旧值相同
console.log(val);
console.log(oldVal);
},
// deep: true
},
obj: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true
}
}
})
</script>
</body>
</html>
总结：
前端内容回顾
HTML 超文本标记语言 帮助我们构建页面结构
CSS 层叠样式表 给我们的页面结构渲染样式
JS 脚本语言 用于用户的交互
JQuery 对js语法的封装
Bootstrap 封装样式
Vue的简介
借鉴后端的MVC架构模式
是MVVM架构 Model View ViewModel
主要思想是数据驱动视图
从获取DOM渲染DOM的操作中解脱出来
Vue的常用指令
-- v-text innerText
-- v-html innerHtml
-- v-for
-- v-if v-else-if v-else appendChild
-- v-show display
-- v-bind 绑定属性 简写:
-- v-on 绑定事件 简写@
-- v-model 数据的双向绑定
-- input
-- textarea
-- select
-- 指令修饰符
-- .lazy
-- .number
-- .trim
-- 自定义的指令
-- Vue.dirctive("指令名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符
})
获取DOM -- 给标签加ref属性 ref="xxxx" -- this.$refs.xxxx 计算属性 computed 放入缓存 当数据改变的时候才会重新执行计算 跟data中数据的区别 数据的监听 -- watch去监听 -- 字符串 -- 监听到改变新的值和旧的值不同的 -- 数组 -- 只能监听到长度的变化 新旧值相同的 -- 改变数组值的时候监听不到 必须用$set(array, index, value) 新旧值相同的 -- 对象 -- 只能监听到value的改变 必须深度监听 -- 增加对象的key 必须用$set(obj, key, value) -- 新旧值相同的