vue学习（二）Vue常用指令
2 Vue常用指令
1. vue的使用要从创建Vue对象开始
var vm = new Vue();
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
var vm = new Vue({
el:"#app",
data: {
数据变量:"变量值",
数据变量:"变量值",
数据变量:"变量值",
},
});
el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
data: 保存vue.js中要显示到html页面的数据。
3. vue.js要控制器的内容外围，必须先通过id来设置。
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
2.1 vue用法
<body>
<div id="app">
{{name}} // 模板语法
</div>
<script>
const app = new Vue({ // 实例化
el:'#app', // 必须要有 指定作用域
data:{
name:'alex' // 数据
}
})
</script>
</body>
2.2 v-html;v-text
# v-text
<body>
<div id="app">
<p v-text="name"></p> #### v-text="name"
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'alex'
}
})
</script>
</body>
# v-text和v-html
<body>
<div id="app">
<p v-text="name"></p> #### v-text
<div v-html="hobby"></div> #### v-html
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'alex',
hobby:`<ul>
<li>篮球</li>
<li>女</li>
<li>足球</li>
</ul>`
}
})
</script>
</body>
2.3 v-for
<body>
<div id="app">
<div v-for="items in vegetables">{{items}}</div> ### 重点
<div v-for="items in fruit">{{items.name}}的价格是{{items.price}}</div> ### 重点
</div>
<script>
const app = new Vue({
el:'#app',
data:{ // 数据
vegetables:['茄子', '西红柿', '豆角'],
fruit:[{
name:'西瓜',
price:'1.99'},
{
name:'桃子',
price:'1.88'
}
]
}
})
</script>
</body>
2.4 v-if,v-else-if,v-else
<body>
<div id="app">
<div v-if="role=='student'">
学生登录系统
</div>
<div v-else-if="role == 'teacher'">
老师登录系统
</div>
<div v-else>
<h1>请使用正确的身份</h1>
</div>
</div>
<script>
const app = new Vue({
el:'#app',
data:({
role:'student'
})
})
</script>
</body>
# 浏览器console控制台。切换app.role='teacher'来实现v-else-if和v-else的实现
// 在html里只显示页面显示标签（说明添加的是appendChild）
2.5 v-show
<body>
<div id="app">
<p v-show="is_show">Vue中v-show指令</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:({
is_show:true # 改变这里
})
})
</script>
// 页面标签显示是 display 来显示
</body>
2.6 v-bind 简写 ：
2.6.1 绑定a标签
我们之前的写法
<div id="app">
<a href="https://www.baidu.com">去百度</a>
</div>
vue中v-bind指令
<body>
<div id="app">
<a v-bind:href="link">去百度</a> ☆☆☆☆☆☆
</div>
<script>
const app = new Vue({
el:'#app',
data:({
link:'https://www.baidu.com'☆☆☆☆☆☆
})
})
</script>
</body>
2.6.2 绑定样式
之前的写法
<head>
<style>
.jump{
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<a href="https://www.baidu.com" class="jump">去百度</a>
</div>
</body>
vue中v-bind指令
<body>
<div id="app">
<a v-bind:href="link" :class="{jump:isActive}">去百度</a> ### v-bind简写是‘:’，绑定样式{}
</div>
<script>
const app = new Vue({
el:'#app',
data:({
link:'https://www.baidu.com',
isActive:true
})
})
</script>
</body>
2.7 v-on 简写 @
<body>
// 两者选一个
<div id="app">
<button v-on:click="my_click" @mouseenter="my_enter" @mouseleave="my_leave">点我给你想要的</button>
</div>
==================================================
<div id="app">
<button v-on="{click:my_click,mouseenter:my_enter,mouseleave:my_leave}">点我给你想要的</button>
</div>
==================================================
<script>
const app = new Vue({
el:'#app',
methods:{
my_click:function () {
alert('123')
},
my_enter:function () {
console.log('移入打印')
},
my_leave:function () {
console.log('移出打印')
}
}
})
</script>
</body>
2.8 小demo-给Alex加点料
壹：
<style>
#name{
width: 150px;
height: 150px;
border: solid 1px black;
}
.green{
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="app">
<div id="name" :class="{green:isActive}"> # 绑定样式
<p v-text="name"></p>
</div>
<button v-on:click="my_click">点我改变颜色</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'Alex',
isActive:true
},
methods:{
my_click:function () {
this.isActive = ! this.isActive
}
}
})
</script>
</body>
贰：
<body>
<div id="app">
<button @click="my_click">点我显示</button>
<h1 v-show="is_show">晓强</h1>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
is_show:false
},
methods:{
my_click:function () {
this.is_show = ! this.is_show
}
}
})
</script>
</body>
2.9 v-model 双向绑定
<body>
<div id="app">
<p>请输入你的姓名</p>
<input type="text" v-model="name">
{{name}}
<br>
<p>请选择你的性别</p>
<input type="checkbox" value="男" v-model="sex">
<input type="checkbox" value="女" v-model="sex">
{{sex}}
<br>
<p>单选</p>
<select name="" id="1" v-model="boy_friend">
<option value="林俊杰0">林俊杰0</option>
<option value="林俊杰1">林俊杰1</option>
<option value="林俊杰2">林俊杰2</option>
</select>
{{boy_friend}}
<br>
<p>多选</p>
<select name="" id="2" v-model="girl_friend" multiple>
<option value="林志玲0">林志玲0</option>
<option value="林志玲1">林志玲1</option>
<option value="林志玲2">林志玲2</option>
</select>
{{girl_friend}}
<br>
<p>textarea</p>
<textarea name="" id="" cols="30" rows="10" v-model="my_textarea">
</textarea>
{{my_textarea}}
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'xiaoqiang',
sex:[],
boy_friend:[],
girl_friend:[],
my_textarea:''
}
})
</script>
</body>
2.10 指令修饰符
2.10.1 懒惰lazy/去空格（trim）
2.10.2 number显示数据类型
2.10.3 pre标签显示多个空格
<body>
<div id="app">
<p>lazy回车之后显示</p>
<input type="text" v-model.lazy="name">
<input type="text" v-model.lazy.trim="name"> # 去空格
{{name}}
<hr>
<p>number显示数据类型</p>
<input type="text" v-model.number="phone">
{{typeof phone}}
<hr>
<p>pre标签显示多个空格</p>
<input type="text" v-model="pre">
<pre>{{pre}}</pre>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
name:'',
phone:null,
pre:'',
}
})
</script>
</body>
2.11 计算指令 computed
# 效果是字符串拼接
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>学科</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>python基础</td>
<td><input type="text" v-model="python"></td>
</tr>
<tr>
<td>前端</td>
<td><input type="text" v-model="web"></td>
</tr>
<tr>
<td>django</td>
<td><input type="text" v-model="django"></td>
</tr>
<tr>
<td>总分</td>
<td>{{python + web +django}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
python:100,
web:100,
django:100
}
})
</script>
</body>
<tr>
<td>python基础</td>
<td><input type="text" v-model.number="python"></td>
</tr>
<body>
<div id="app">
<table border="1">
<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>前端</td>
<td><input type="text" v-model.number="web"></td>
</tr>
<tr>
<td>django</td>
<td><input type="text" v-model.number="django"></td>
</tr>
<tr>
<td>总分</td>
<td>{{python + web +django}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
python:100,
web:100,
django:100
}
})
</script>
</body>
- 在继续改，我们在总分和平均分的时候算的太麻烦了，怎么办呢，引出computed
# computed版本------对比没有注释掉的部分
<body>
<div id="app">
<table border="1">
<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>前端</td>-->
<!--<td><input type="text" v-model.number="web"></td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>django</td>-->
<!--<td><input type="text" v-model.number="django"></td>-->
<!--</tr>-->
<tr>
<td>总分</td>
<td>{{sum_num}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{(python + web + django)/3}}</td>
</tr>
</tbody>
</table>
</div>
<script>
// const app = new Vue({
// el: '#app',
// data: {
// python:100,
// web:100,
// django:100
// },
computed:{
sum_num:function () {
return this.python + this.web + this.django
},
avg:function () {
return this.sum_num / 3
}
}
})
</script>
</body>
例：
# getter
<div id="app">
{{ reverseMsg }}
<button @click="handleClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:'hello word'
},
methods:{
handleClick:function () {
this.msg = '我在学习vue的计算属性'
}
},
computed:{
// computed 默认只有getter方法
// 计算属性最大的优点：产生缓存 如果数据没有发生改变 直接从缓存中取
reverseMsg:function () {
return this.msg.split('').reverse().join('')
}
}
})
</script>
# setter
<div id="app1">
{{content}}
<input type="text" v-model="content" @input="handleInput">
<button @click="handleClick">改变</button>
</div>
<script>
var app = new Vue({
el:'#app1',
data:{
msg:''
},
methods:{
handleInput:function (event) {
const {value} = event.target;
this.content = value
},
handleClick:function(){
console.log(this.content) // 点击改变打印值
}
},
computed:{
content:{
set:function (newV) {
// console.log(newV)
this.msg = newV
},
get:function () {
return this.msg
}
}
}
})
2.12 自定义指令 directive
- 模板
Vue.directive('mingzi',function (el,bindding) {});
- 步骤
① 搭建vue
② 新建自定义指令
③ 绑定个盒子
④ 操作
① 搭建vue
<body>
<div id="app"> </div>
<script>
const app = new Vue({
el:'#app',
})
</script>
</body>
② 新建自定义指令
<!--<body>-->
<!--<div id="app">-->
<!--</div>-->
<!--<script>-->
Vue.directive('boxs',function (el,bindding) { });
<!--const app = new Vue({-->
<!--el:'#app',-->
<!--})-->
<!--</script>-->
<!--</body>-->
③ 绑定个盒子,加个样式和数据
<!--<body>-->
<!--<div id="app">-->
<div class="box" v-boxs="text"></div>
<!--</div>-->
<!--<script>-->
<!--Vue.directive('boxs',function (el,bindding) {-->
<!---->
<!--});-->
<!--const app = new Vue({-->
<!--el:'#app',-->
data:{
text:true
}
})
//</script>
//</body>
- Vue.directive里打印
Vue.directive('boxs',function (el,bindding) {
console.log(el); // 绑定指定的元素（div）
console.log(bindding) // 自定义指令的对象（.value是一个值）
});
④ 操作--盒子位置变化的demo
<body>
<div id="app">
<div class="box" v-boxs="text"></div>
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
if(bindding.value){
el.style.position = 'fixed';
el.style.bottom = 0;
el.style.right = 0
}else{
el.style.position = 'static';
}
});
const app = new Vue({
el:'#app',
data:{
text:true
}
})
</script>
</body>
看下图，我们所写的都会显示那么我们研究一下标红的地方--modifiers
我们怎么改呢
<div id="app">
<div class="box" v-boxs.right.top="text"></div> ☆☆☆☆☆
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
console.log(el);
console.log(bindding);
console.log(bindding.modifiers); ☆☆☆☆☆
......
- 盒子变换位置
<body>
<div id="app">
<!--<div class="box" v-boxs.right.top="text"></div>-->
<div class="box" v-boxs.left.bottom="text"></div>
</div>
<script>
Vue.directive('boxs',function (el,bindding) {
console.log(el);
console.log(bindding);
console.log(bindding.modifiers);
let position = bindding.modifiers; ☆☆☆☆☆☆
if(bindding.value){
el.style.position = 'fixed';
// el.style.bottom = 0;
// el.style.right = 0
for(let key in position){ ☆☆☆☆☆☆
el.style[key]=0
}
}else{
el.style.position = 'static';
}
});
const app = new Vue({
el:'#app',
data:{
text:true
}
})
</script>
2.13 获取DOM操作
<body>
<div id="app">
<div ref="my_box"> ☆☆☆☆☆ref
<p>获取DOM</p>
</div>
<button @click="my_click">点我给盒子改变样式</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
my_click:function () {
this.$refs.my_box.style.color = 'red' ☆☆☆☆☆refs/my_box
}
}
})
</script>
</body>
2.14 watch 监听
# 基础的数据类型
<div id="app">
<input type="text" v-model="msg">
{{ msg }}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
msg:''
},
watch:{
msg:function (newV,oldV) {
console.log(newV,oldV)
}
}
})
</script>
# 复杂的数据类型 object Array
<div id="app">
{{ stus[0].name }}
<button @click="stus[0].name='Tom'">改变</button>
</div>
<script>
// 对于普通的数据类型 可以用watch直接监听 对于复杂的数据类型 obj/array 要深度监视
var app = new Vue({
el:'#app',
data:{
stus:[{name:'jack'}]
},
watch:{
'stus':{
deep:true,
handler:function (newV,oldV) { # 重点
console.log(newV[0].name)
}
}
}
})
</script>
vue学习（二）Vue常用指令的更多相关文章
- Vue学习二：v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- vue学习(二) 三个指令v-cloak v-text v-html
//style <style> [v-cloak]{ display:none } </style> //html <div id="app"> ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue.js入门及其常用指令
一.Vue框架 https://cn.vuejs.org/ 官网 前端领域有三大框架 Angular诞生于2009年,是由谷歌公司创建出来的框架: React诞生于2013年,是由facebook公司 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
随机推荐
- 2016 黑客必备的Android应用都有哪些？
免责声明:本站所发布的此份清单仅供学习之用.我们不支持读者利用其中的任何工具进行任何不道德的恶意攻击行为. 根据业界的一系列评测以及亲身经验,我们整理出了这份最佳Android黑客应用清单.除了对应用 ...
- dir815_FW_102.bin路由器固件解压碰到的坑
在跟随大神kczwa1进行路由器漏洞分析时,对dir815_FW_102.bin 固件文件用binwalk -e dir815_FW_102.bin命令进行解压时,在根目录squashfs-root下 ...
- 第1节 storm编程：3、storm的架构模型的介绍
nimbus:主节点,接收客户端提交的任务,并且分配任务,新的版本当中nimbus已经可以有多个了 zookeeper集群:storm依靠zk来保存一些节点信息,nimbus将分配的任务信息都写入到z ...
- DatePicker和DataPickerDialog以及AutoCompleteTextView的基本使用方法
1.DatePicker和DatePickerDialog的基本使用方法: main.xml: <?xml version="1.0" encoding="utf- ...
- 104、Java中String类之使用indexOf()等功能查找
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- i春秋-百度杯九月场-YeserCMS(cmseasy的UpdateXML注入漏洞)
学习了大佬们的操作才做出来,记录一次菜鸡的无能为力. tips:flag在网站根目录下的flag.php中.我们的目标就是flag.php了. 题目说是心的CMS:YeserCMS,然而百度一下,出来 ...
- SciPy 常量
章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...
- 落谷p1325雷达安装(计算几何)
传送门 //p1325雷达安装 //很明显雷达应该安装在海岸线上 //而为了满足一个点被覆盖那在区间[x - sqrt(d ^ 2 - y ^ 2), x + sqrt(d ^ 2 - y ^ 2)] ...
- HTML学习第七天（一）
HTML学习第七天(一) aside元素用来表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容的相关引用.侧边栏.广告.导航条,以及其他类似的有区别于主要内容的部分 <!DOCTYPE ...
- Windows 10工程版本泄露全新设计的操作中心圆角样式
早些时候微软错误地向Windows 10所有测试通道推送内部工程版本,该版本构建后尚未经过微软内部测试. 当然本身微软也没准备推送所以该版本里很多新功能未被关闭,而成功升级的用户则可以立即查看这些功能 ...