vue的指令
我之前学了学angular
发现angular和vue的指令有点类似
先说一下
首先是
v-model双向绑定数据
<div id="box">
<ul>
<!--ng-repeat-->
<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data(){
return{
// arr:['module','views','controlle','aaaaa']
arr:[
{"name":"xiaohong1","age":12},
{"name":"xiaohong2","age":12},
{"name":"xiaohong3","age":12},
{"name":"xiaohong4","age":12}
]
}
}
})
</script>
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-if显示与隐藏 (dom元素的删除添加 个人理解)
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-else
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-bind
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div> <script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>
v-on 事件
<div id="box">
<!-- v-on -->
<button v-on:click="say">按钮</button>
<!--<button @click="say">按钮</button>-->
</div> <script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-text读取文本不能读取html标签
<div id="box">
<div v-text="msg"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
msg:"11111"
}
},
methods: {
say() {
alert(111);
}
}
})
</script>
v-html 能读取html标签
<div id="box">
<div v-html="msg"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
msg:"<h1>121212</h1>"
}
},
methods: {
say() {
}
}
})
</script>
v-class 类名
<style>
.red { background: red;
} .blue {
width: 100px;
height: 100px;
background: blue;
} </style> <div id="box">
<div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
<!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式-->
<!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>--> </div> <script>
new Vue({
el: "#box",
data(){
return {
isred:false
}
}
})
</script>
v-style 与v-class用法大致一样 这个我就不写了
v-once 与我下边的例子 就是 加载一次 如果用到事件中就是事件只执行一次(@click.once="show")
<div id="box">
<div v-once>{{msg}}</div>
</div> <script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"qwdqwdqwd"
}
}
})
</script>
v-cloak防闪烁
<div id="box">
<div v-cloak="">欢迎--{{msg}}</div>
</div> <script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
v-pre 把标签内部的元素原位输出
<div id="box">
<div v-pre>欢迎--{{msg}}</div>
</div> <script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
接下来就是一个总结了
vue 是什么 简介型的javascript框架 个人开发 (刘雨溪) 特点:mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)
vue1 双向数据绑定 vue2 单向数据流
单页面应用 v-model 数据绑定
data 返回对象用 return v-for 循环 格式 v-for="字段名 in(of) 数组json" v-show 显示 隐藏 传递的值为布尔值 true false 默认为false v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 v-bind 动态绑定 作用: 及时对页面的数据进行更改 v-on 绑定事件 函数必须写在methods里面
@click 快捷方法 v-text 解析文本 v-html 解析html标签 v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三目型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]' v-once 进入页面时 只渲染一次 不在进行渲染 v-cloak 防止闪烁 v-pre 把标签内部的元素原位输出
vue的指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令用法总结及案例
1.vue中的指令有哪些?
- vue之指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- 第2章-Vue.js指令
一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...
随机推荐
- H5-手机震动
//手机震动function vibration(){ navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navi ...
- linux重装rabbitmq的问题
一.卸载 [root@zabbix_server lib]# rpm -qa|grep rabbitmq rabbitmq-server--.noarch [root@zabbix_server li ...
- mysql与cmd,中文乱码
图中第一次select, 通过navicat插入表中的, 下面的这次select结果,是直接在命令行中插入的,中文就显示了两个问号...搞不懂咋回事..我是win10家庭版系统.....希望各位道友谨 ...
- VS下.net开发常用扩展、配置
Vue.js Pack Copy As Html HTML Tools Word Highlight With Margin 绿豆沙颜色:R:199 G:237 U:204
- CentOS7更改运行级别
Step 1:查看系统默认运行级别 [root@node-1 html]# systemctl get-default //图形界面graphical.target [root@node- ...
- Python开发【第十篇】:Redis
缓存数据库介绍 NoSQL(Not Only SQL),即"不仅仅是SQL",泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应对web2.0网站,特别是 ...
- Python的range()函数用法
Python的range()函数有三种用法,简单地说就是下图的三种用法: 运行结果如下:
- 位移运算 << >> >>>
位移运算都是补码的运算 左移<<:左移后第一位可能是1,也可能是0,所以可能是正数,也可能是负数,正负都补0 右移>>:抹掉最后一位,近似于十进制值除以2,负数右移高位补1,正 ...
- MySQL联接查询算法(NLJ、BNL、BKA、HashJoin)
一.联接过程介绍 为了后面一些测试案例,我们事先创建了两张表,表数据如下: 1 2 3 4 CREATE TABLE t1 (m1 int, n1 char(1)); CREATE TABLE t ...
- Java多线程中static变量的使用
轉:https://blog.csdn.net/yy304935305/article/details/52456771 鲁迅先生曾说过:“时间就像海绵里的水,只要愿挤,总还是有的”.不管肿(怎)么说 ...