Vue之指令和绑定
一、v-once指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
<input type="text" v-model="mymsg">
<!--只有v-once 加上就是初始值值一样也式不能进行修改的 只有自己=手动修改才可以-->
<input type="text" v-model="mymsg" v-once > <hr>
<p>{{ mymsg }}</p> <!--加上 同上 单独使用-->
<p v-once>{{ mymsg }}</p>
</div>
</body> <script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
mymsg:'我是初始值',
} })
</script>
</html>
二、v-cloak(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title>
<style>
// 方法一
/*样式先进行隐藏 不展示 目的: 在添加大量样式的时候不进行样式展示 >>> 闪烁事件*/
[v-cloak]{
display: none; }
</style>
方法二是 先加载页面
<script src="js/vue.js"></script>
</head> <body> <div id="app" v-cloak> <p>{{ }}</p> <p>{{ }}</p> <p>{{ }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', }) </script> </html>
v-cloak: 防止闪烁
三、条件指令
true 的话会将两个都进行展示
普通的点击绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> <style>
/*操作图表样式 这里是分开的来写了*/
.box{
width: 400px;
height: 400px;
float: left;
margin: 10px; }
/*操作类的的属性的颜色*/
.red{
background-color: red; }
.yye{
background-color: yellow; }
.blue{
background-color: blue; }
.active{background-color: deeppink} </style> </head>
<body>
<div id="app">
<!--v-if='变量' 一般变量是布尔值-->
<!--v-else-if='变量'-->
<!--v-else-->
<!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 -->
<!--else 是上面了两个都不满足才会走下面的else-->
<!---->
<p v-if="">if条件成立</p>
<p v-else-if="">else-if条件成立</p>
<p v-else>else最后</p> <div class="yyy"> <p>
<button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button>
<button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button>
<button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button>
</p> <!--条件判断点击哪一个 哪一个就展示页面-->
<div class="box red" v-if="showName == 'redBox'"></div>
<div class="box yye" v-else-if="showName == 'yyeBox'"></div>
<div class="box blue" v-else></div>
</div> </div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
showName:'', },
// 点击事件 方法
methods: {
changeBox(name) {
this.showName=name;
}
} })
</script>
</html>
三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> <style>
/*操作图表样式 这里是分开的来写了*/
.box{
width: 400px;
height: 400px;
float: left;
margin: 10px; }
/*操作类的的属性的颜色*/
.red{
background-color: red; }
.yye{
background-color: yellow; }
.blue{
background-color: blue; }
.active{background-color: deeppink} </style> </head>
<body>
<div id="app">
<!--v-if='变量' 一般变量是布尔值-->
<!--v-else-if='变量'-->
<!--v-else-->
<!--一组分支，只要上成立 分支会将下方的所有分支进行屏蔽 -->
<!--else 是上面了两个都不满足才会走下面的else-->
<!---->
<!--<p v-if="">if条件成立</p>-->
<!--<p v-else-if="">else-if条件成立</p>-->
<!--<p v-else>else最后</p>--> <div class="yyy"> <!--<p>-->
<!--<button @click="changeBox('redBox')" :class="{active: showName=='redBox'}">红</button>-->
<!--<button @click="changeBox('yyeBox')" :class="{active: showName=='yyeBox'}">黄</button>-->
<!--<button @click="changeBox('blueBox')" :class="{active: showName=='blueBox'}">蓝</button>-->
<!--</p>-->
<p >
<button @click="changeBox('redBox')" :class="showName == 'redBox' ? 'active' : ''">红</button>
<button @click="changeBox('yyeBox')" :class="showName == 'yyeBox' ? 'active' : ''">黄</button> 刚才这里出现无敌的BUG 其实就中文的符号 '' 区别而已'' 整得半天
<button @click="changeBox('blueBox')" :class="showName == 'blueBox' ? 'active' : ''">蓝</button>
</p> <!--条件判断点击哪一个 哪一个就展示页面-->
<div class="box red" v-if="showName == 'redBox'"></div>
<div class="box yye" v-else-if="showName == 'yyeBox'"></div>
<div class="box blue" v-else></div>
</div> </div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
showName:'redBox', },
// 点击事件 方法
methods: {
changeBox(name) {
this.showName=name;
}
} })
</script>
</html>
四、v-pre 指令（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
<p>{{msg}}</p> <p v-pre>
{{ msg}}
// v-pre 指令可以在vue控制范围内 行成局部的vue不可控制区域
也就是不会渲染 而是原义进行显示
<span v-if="xixixi"></span>
</p>
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'message'
} })
</script>
</html>
五、循环指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
(1)遍历字符串
<p>{{str}}</p>
<!--只能索引取值不能进行切片-->
<p>{{str[1]}}</p>
<div>
<!--v-for ="循环语句" 底层原理进行封装-->
<span v-for="i in str">{{i }}</span> </div>
<!--针对循环遍历的标签,通过会提供key属性来优化渲染速度 key 必须是唯一 (key可以不用提供)-->
<div v-for="(i,index) in str" :key="i+index">{{i}} {{index}}</div> (2)遍历数组
<!--元素和索引足以位置-->
<div v-for="(i, index) in list1"> {{index}} {{i}} </div> （3）字典
key：value <div v-for="(s,i) in dic">{{i}}:{{s}} </div>
<div v-for="(c,k,i) in dic"> {{c}} {{k}}:{{i}} </div>
koko name:0
18 age:1
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
str:'快乐的压缩123adc',
list1:[1,2,3,4,8,6],
dic:{'name':'koko','age':18}
} })
</script>
</html>
六、todolist留言板留言案chc列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title>
<style>
li:hover{
color: red;
cursor: pointer;
}
</style> </head>
<body>
<div id="app">
<p>
<!--（1）input 框绑定事件-->
<input type="text" v-model="userMsg">
<!--(2)留言按钮绑定点击事件-->
<button type="button" @click="sendMsg">留言</button>
</p>
<ul>
<!--列变组 放多i个值 删除 绑定删除点击事件-->
<li v-for="(msg,index) in msgs" @click="deleteMsg(index)">
<!--渲染的留言的信息-->
{{msg}}
</li>
</ul> </div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
userMsg:'', // 用户写入的留言 初始值为空
// 赋值 取值 反序列化 s所有的留言
msgs:localStorage.msgs ? JSON.parse(localStorage.msgs): [], },
methods:{
sendMsg(){
// 开始留言点击事件
// 尾部增加 this.msgs.push(this.userMsg)；
// 开头位置增加 this.msgs.unshift(this.userMsg);
// 赋值变量 >>> msgs 变量容器
let userMsg = this.userMsg;
// 判断是否输入空值
if (userMsg){
this.msgs.unshift(userMsg); // 渲染给页面
// 同步到数据库
localStorage.msgs = JSON.stringify(this.msgs);
this.userMsg=''; } },
// 删除留言 也是在方法下面进行操作 deleteMsg(index){
// 开始索引 操作长度 操作的结果们
this.msgs.splice(index,1) } } })
</script>
</html>
七、实例成员-插值表达式符号（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
{{123546}}
{[msg]}
+ msg +
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:''
},
delimiters:['{[',']}'] })
</script>
</html>
注意的是
delimiters:['{[',']}'] 外面套的是一个列表 用逗号分隔开 是咧成员符号只要
{{123546}}
{[msg]}
+ msg +
不配配或者不相同就行了 就不会帮我们解析 按照愿意字符串进行 渲染 可以结合的django 的语法去做模板渲染值
八、计算属性（compute）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
<!--// methon函数绑定-->
<p @click="f1">{{num}}</p> <p>十位：{{parseInt(num/10)}}</p> 取整
<p>各位：{{num%10}}</p> 取余
<hr>
一个变量的值依赖多个变量，且依赖的任意一个变量发生改变，该变量都会改变
十位：<input type="number" v-model="shi_wei" min="" max="">
各位：<input type="number" v-model="ge_wei" min="" max="">
结果：<b>{{ shi_wei*10 + +ge_wei }}</b>
结果：<b>{{result}}</b>
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:99,
shi_wei:'', // 初始值
ge_wei:'', // 初始值
},
methods:{
f1(){
this.num -=3;
}
},
// 1) computed是用来声明 方法属性 的
// 2) 声明的方法属性不能在data中重复定义
// 3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
computed:{
result(){
return this.shi_wei*10 + +this.ge_wei //+this.ge_wei ”+“是转成数字
}
} })
</script>
</html>
九、属性监听（wach）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
<!--多个变量的值依赖一个变量,改变量发生改变,所有依赖的值都会发生改变-->
<!--测试点击事件-->
<p @click="f1">{{num}}</p>
<p>十位:{{shi}}</p>
<p>个位:{{ge}}</p> </div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num:,
shi:,
ge:, },
// 方法:
methods:{
f1(){
this.num -=;
} },
watch:{
num(){
this.shi = parseInt(this.num / );
this.ge = this.num % ;
}
}
})
</script>
</html>
计算和监听案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app">
姓:<input type="text" v-model="fName">
名:<input type="text" v-model="lName">
姓名:<b>{{fuName}}</b> <hr>
<!--监听其实就是拆分-->
姓名:<input type="text" v-model="fullName">
姓: <b>{{firstName}}</b>
名: <b>{{lastName}}</b>
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
fName:'', // 初始值
lName:'', //
fullName:'',
firstName:'',
lastName:'', },
computed: {
fuName(){
// 组合式 返回输入的 姓 + 名 = 名字
return this.fName + this.lName; }
},
watch:{
fullName(){
nameArr = this.fullName.split('');
console.log(nameArr);
this.firstName = nameArr[];
this.lastName = nameArr[];
}
} })
</script>
</html>
十、组件
// 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与局部组件
// 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
// 全局组件：不用注册，就可以成为任何一个组件的子组件
// 局部组件：必须注册，才可以成为注册该局部组件的子组件
// 3) 每一个组件都有自身的html结构，css样式，js逻辑
// 每一个组件其实都有自己的template，就是用来标识自己html结构的
// template模板中有且只有一个根标签
// 根组件一般不提供template，就由挂载点的真实DOM提供html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title> </head>
<body>
<div id="app"> </div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'mymessge',
c1:'red' },
template:`
<div :style="{color:c1}" @click="fn">{{msg}} {{msg}}</div>`
,methods:{
fn(){
// alter(this.msg)
}
}
})
</script>
</html>
10.1 局部组件
// 创建局部组件
// 1) 首先创建局部组件template模板
// 2)在父组件中注册改局部组件
// 3)在父组件的template 模板中渲染该局部组件
需要注意的是:必须将我们局部组件进行 注册 >>> 在原父组件 实列对象进行注册 注册模板的key不能写驼峰体 推荐命名中划线 然后 将注册的组件template模板渲染到父组件标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title>
<style>
.box{
box-shadow: 0 3px 5px 0 gold;
width: 240px;
height: 300px;
text-align: center;
padding: 10px 0;
margin: 5px;
float: left;
}
.box img {
width: 200px;
height: 220px;
} </style> </head>
<body>
<div id="app">
<!--这里作为局部模板的展示 但是必须和components: 注册的可以一致 而且推荐使用中划线 不能解析驼峰体-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag> </div> </body>
<script src="js/vue.js"></script>
<script>
// 创建局部组件
// 1) 说先创建局部组件template模板
// 2)在父组件中注册改局部组件
// 3)在父组件的template 模板中渲染该局部组件 let localTag = {
template:`
<div class="box">
<img src="img/111.jpg" alt="">
<h3>样板</h3>
<p>初步样式</p>
</div>
`
}; new Vue({
el:'#app',
components:{
// 这也是个坑啊
'local-tag':localTag,
} })
</script>
</html>
10.2 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title>
<style>
.box{
box-shadow: 0 3px 5px 0 gold;
width: 240px;
height: 300px;
text-align: center;
padding: 10px 0;
margin: 5px;
float: left;
}
.box img {
width: 200px;
height: 220px;
} </style>
</head>
<body>
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div> </body>
<script src="js/vue.js"></script>
<script> // 全局组件不用进行注册
// 1.创建全局组件
// 2.直接将template
Vue.component('global-tag',{
// 写
template:`
<div class="box" @click="action">
<img src="img/111.jpg" alt="">
<h3>样式</h3>
<p>适用样式❤{{num}}</p> </div>
`,
data(){
// 应用data :function() 返回数字
return {
num:0
}
},
methods:{
// 变量名 函数名 数据属性和方法都是在我们的全局组件中哦
action(){
this.num ++; } } }); new Vue({
el:'#app', })
</script>
</html>
重点解析组件:
十一、组件交互-父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue之模板操作二</title>
<style>
.info {
text-align: center;
width: 200px;
padding: 3px;
box-shadow: 0 3px 5px 0 pink;
float: left;
margin: 5px;
}
.info img {
width: 200px;
height: 220px;
}
</style>
</head>
<body>
<div id="app">
<info v-for="info in infos " :key="info.image" :myinfo="info"></info>
</div> </body>
<script src="js/vue.js"></script>
<script> // 先定义我们循环展示的对象 列表套字典 let infos = [
{ image:'img/111.jpg',
title:'油画'
},
{image:'img/222.jpg',
title:'漫画' },
{image:'img/333.jpg',
title:'小猫' }
]; // 创建局部组件 渲染样式 let info = {
template:`
<div class="info">
<img :src="myinfo.image" alt="">
<p><b>{{myinfo.title}}</b></p> </div>
`,
// 通过props 将获取的
props:['myinfo'] }; // 数据是如何进行交互的呢 数据交互-父传子-通过绑定属性的方法
// 1)通过父组件提供数据
// 2/) 在父组件模板中, 为子组件标签设置自定义属性,绑定的值由父组件提供
// 3) 在子组件实列中,通过props 实列成员获取自定义属性
new Vue({
el:'#app',
//注册局部组件
components:{
// 将我们创建的 局部组件进行注册
'info':info,
},
data:{
// 定义的let infos 进行传值
'infos':infos
} })
</script>
</html>
十二、组件交互-子传父
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.close:hover {
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button @click="sendMsg">留言</button>
</p>
<ul>
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let msgLi = {
template: `
<li>
<span class="close" @click="deleteMsg(index)">x </span>
<span>第{{ index + 1 }}条：</span>
<span>{{ msg }}</span>
</li>
`,
props: ['msg', 'index'],
methods: {
// 系统的click事件
deleteMsg(i) {
// $emit('自定义事件名', 参数们)
this.$emit('remove_msg', i);
this.$emit('myclick', 1, 2, 3, 4, 5)
}
}
};
// 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 new Vue({
el: '#app',
data: {
msgs: [],
userMsg: ''
},
methods: {
sendMsg() {
if (this.userMsg) {
this.msgs.push(this.userMsg);
this.userMsg = "";
}
},
removeAction(i) {
this.msgs.splice(i, 1)
}
},
components: {
msgLi
}
})
</script>
</html>
Vue之指令和绑定的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- Vue - 自定义指令
1.Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 2.钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令 b ...
- vue的指令
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element(元素) 当前作 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- Vue -自定义指令&钩子函数
除了核心功能默认内置的指令,Vue也允许注册自定义指令 页面加载后,让文本框自动获取焦点,原生js做法是获取文本框元素后调用focus()方法,但Vue不建议手动操作DOM元素,所以此时要自定义指令 ...
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令directives使用及生命周期
生命周期 bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于docu ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- VUE自定义指令生命周期，VUE生命周期
一.自定义指令的生命周期 自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次,指令第一次绑 ...
随机推荐
- Thymeleaf 2-基础语法
三.基础语法 1.创建HTML 由上文也可以知道需要在html中添加: <html xmlns:th="http://www.thymeleaf.org"> 这样,下文 ...
- eclipse代码自动补全设置
1.说明 eclipse安装好了之后,在编辑框中输入某个英文字符,默认不自动弹出自动代码选择框,需要手动按下 Alt + / 或者输入的字符为 . 才弹出代码自动补全框.其实eclipse是可以设置 ...
- 分享页（把末尾的JS函数换成这个）
function jsApiStart(obj) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以 ...
- 如何让css与js分离
在 webpack 我们如何让 css 与 js 分离: 我们需要安装插件:extract-text-webpack-plugin 1. 用:npm 下载插件 npm install extract- ...
- 常量const实践
这篇文章写的很好:https://www.cnblogs.com/zhangfeionline/p/5882790.html 自己是实践: 1. 定义时必须初始化值,不然如下错误: 2. 3. 使用:
- leetcode 437 Path Sum III 路径和
相关问题:112 path sum /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNo ...
- VSCode - 使用 WSL（Windows Subsystem for Linux）
一开始我是只将 VSCode 集成的终端改成 WSL 的 Bash,结果发现内置的 GIt 用的还是 Windows 的 Git,Git Hooks 用的 Windows 的环境,上网搜了一下发现有很 ...
- TP3.2写分页
用TP3.2写分页 手册上说的好难懂,我自己去网上找资料 ,现在整理一下,以后可能会用: 在Think下面有Page.class.php类: 我在这个下面放了一个function.php的(算是类吧又 ...
- JSP———数据交互【1】
JSP的内置对象 不用声明就可以在JSP页面中使用 request对象 内置对象 request 封装了用户提交的信息,主要用于处理客户端请求 <FORM action="tom.js ...
- 浅谈html5在vr中的应用
使用过HTML5制作动画过程的开发者都知道,HTML5页面给人一种逼真的感觉,同时HTML也是可以制作VR页面,但是需要你熟练HTML5与JavaScript开发过程,所以在有必要的情况下,我们可以用 ...