Vue第二篇 Vue的常用指令
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 {
width: 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 {
width: 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)
-- 新旧值相同的
Vue第二篇 Vue的常用指令的更多相关文章
- vue 的基本语法和常用指令
什么是vue.js Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- Vue小白篇 - Vue介绍
Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- Vue小白篇 - Vue 的指令系统 (1) v-text、v-html
v-text:相当于innerText v-html:相当于innerHTML <div id="box"> {{ msg }} <div v-text=&quo ...
- Vue小白篇 -Vue 的模板语法
可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...
- 第二篇、JavaScript常用的API
下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...
- 数据分析第二篇：matplotlib 常用的几个绘图方法
Matplotlib matplotlib是python的绘图库,使用它可以很方便的绘制出版质量级别的图形 matplotlib的基本功能 1.基本绘图 1.1 绘制坐标系中连续的线,设置线型/线宽/ ...
- Vue专题-js常用指令
vue.js官方给自己的定为是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍了vue.js的常用指令. vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML ...
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
随机推荐
- CPU的组成 运算器与控制器
计算机结构 CPU结构
- 【C++】【图像处理】灰度直方图实现算法解析（以.raw格式的图像为基础进行图像处理、gray levels：256）
前情提要:本记录需要一定的C++和图像处理基础进行阅读. 图像处理算法学习记录: Code: 1 void histCompute(BYTE*image, int width, int height) ...
- iMessage群发,iMessage群发功能,iMessage群发功能设计,iMessage群发系统
在数字通讯时代,群发消息已经成为我们日常生活中不可或缺的一部分,无论是商务.社交还是日常沟通,群发功能都大大提高了消息传递的效率和便利性. 而在众多的通讯软件中,iMessage无疑是其中的佼佼者,今 ...
- python脚本抢大麦网演唱会门票 ---保姆级教程 python脚本抢大麦网演唱会门票
python脚本抢大麦网演唱会门票 流程: 1.下载并安装anaconda:https://repo.continuum.io/archive/ 下载对应linux/mac/windows版本 2.下 ...
- MinIO FTP 断点续传
MinIO FTP 断点续传 对于minio来说,使用minio官方的Java SDK和开启FTP都是不支持断点续传的.对于要实现http接口的断点续传,可以通过调用Amazon S3 REST AP ...
- bash命令的使用
bash的工作特性之命令执行状态返回值和命令展开所涉及的内容及其示例演出 !脚本执行与调试 1.绝对路径执行,要求文件有执行权限 2.以sh命令执行,不要求文件有执行权限 3..加空格或source命 ...
- UE5：相机震动CameraShake源码分析
本文将会分析UE5中相机震动的调用流程,会简要地分析UCameraModifier_CameraShake.UCameraShakeBase等相关类的调用过程. 阅读本文,你至少需要使用或者了解过Ca ...
- 容器、Docker、虚拟机，别再傻傻分不清
摘要:容器技术起源于Linux,是一种内核虚拟化技术,提供轻量级的虚拟化,以便隔离进程和资源.尽管容器技术已经出现很久,却是随着Docker的出现而变得广为人知. 容器技术起源于Linux,是一种内核 ...
- 如何利用CANN DVPP进行图片的等比例缩放？
摘要:介绍如何用昇腾AI处理器上的DVPP单元进行,图像的等比例缩放,保证图像不变形. 本文分享自华为云社区<CANN DVPP进行图片的等比例缩放>,作者:马城林 . 1. 为什么需要进 ...
- k8s源码Client-go中Reflector解析
摘要:通过本文,可以了解Reflector通过ListWatcher从Kubernetes API中获取对象的流程,以及存储到store中,后续会对DeltaFIFO进行源码研读,通过结合inform ...