vuejs基础-常见指令(基本结构、v-cloak、v-text、v-html、v-bind、v-model\v-if、v-show)
Vue之 - 基本的代码结构
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域，就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div> <script>
// 2. 创建一个Vue的实例
// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
// 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
data: { // data 属性中，存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
</html>
v-cloak 解决插值表达式闪烁问题 ，只会替换自己字节占位符
v-text 默认没有闪烁问题，替换元素中原本内容
v-html 将内容里面的标签
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>**不被替换**{{ msg }}</p>
<h1 v-text="msg">***被替换*</h1>
<div v-html="msg2">被替换</div>
</div> <script type="text/javascript" src="vue.js" ></script>
<script> var vm = new Vue({
el : "#app",
data : {
msg : "123",
msg2 : "<h1>这是一个标签</h1>"
}
})
</script>
Vue指令之v-bind的三种用法
直接使用指令
v-bind使用简化指令
:在绑定的时候，拼接绑定内容：
:title="btnTitle + ', 这是追加的内容'"
<input type="button" value="提交" title="mytitle" />
<input type="button" value="提交" v-bind:title="mytitle+'123'" />
<input type="button" value="提交" :title="mytitle" />
v-on 事件绑定机制
<input type="button" value="按钮" v-on:click="show" />
<input type="button" value="按钮" v-on:mouseover="show" />
var vm = new Vue({
el : "#app",
data : {
msg : "123",
msg2 : "<h1>这是一个标签</h1>",
mytitle:"这是一个title"
},
methods:{
show:function () {
alert("hello");
}
}
})
</script>
在VM实例中，如果想要获取data上的数据，或者想要掉哦用methods中的方法，必须通过this.数据属性名或者this.方法名来进行访问，这里的this，就是表示我们new出来的实例
Vue实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；好处：程序员只需关心数据，不需要考虑如何重新渲染DOM页面。
v-bind 只能实习数据的单向绑定，从M自动绑定到V,无法实现数据的双向绑定
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
/* display: none; */
}
</style>
</head> <body>
<div id="app">
<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>++++++++ {{ msg }} ----------</p>
<h4 v-text="msg">==================</h4>
<!-- 默认 v-text 是没有闪烁问题的 -->
<!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 --> <div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2">1212112</div> <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
<!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 -->
<!-- v-bind 中，可以写合法的JS表达式 --> <!-- Vue 中提供了 v-on: 事件绑定机制 -->
<!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> --> <input type="button" value="按钮" @click="show">
</div> <script src="./lib/vue-2.4.0.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
msg: '123',
msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello')
}
}
}) /* document.getElementById('btn').onclick = function(){
alert('Hello')
} */
</script>
</body> </html> <!-- 1. 如何定义一个基本的Vue代码结构 -->
<!-- 2. 插值表达式 和 v-text -->
<!-- 3. v-cloak -->
<!-- 4. v-html -->
<!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : -->
<!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->
Vue指令之v-model和双向数据绑定
v-model指令，可以是实现表单元素和model中数据的双向数据绑定
注意 v-model 只能运用在表单元素中
input(radio, text , address, email ...)select checkbox textarea
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.min.js" ></script>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<input type="text" v-model="msg"/>
</div>
</body> <script>
var vw = new Vue({
el:"#app",
data:{
msg:"v-model效果展示！"
}
});
</script>
</html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<h4>{{ msg }}</h4> <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 -->
<!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在 表单元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea -->
<input type="text" style="width:100%;" v-model="msg">
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'
},
methods: {
}
});
</script>
</body> </html>
Vue指令之v-if和v-show
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app"> <!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag"> <!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --> <!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 --> <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3> </div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
</body> </html>
vuejs基础-常见指令(基本结构、v-cloak、v-text、v-html、v-bind、v-model\v-if、v-show)的更多相关文章
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_04-vuejs研究-vuejs基础-v-model指令
<!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml&quo ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_07-vuejs研究-vuejs基础-v-bind指令
4.v-bind v-bind:无法双向绑定’ 1.作用: v‐bind可以将数据对象绑定在dom的任意属性中. v‐bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class 2 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_05-vuejs研究-vuejs基础-v-text指令
把js移到body 的下面 网速改慢一点 通过模拟网速慢的情况.刷新页面的时候会有闪烁的效果 速度快的情况下也会闪烁 ,只不过是不明显. 2.解决插值表达式闪烁问题,使用v-text v-text可以 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_06-vuejs研究-vuejs基础-v-on指令
3.v-on绑定一个按钮的单击事件 计算的按钮上加事件 点击计算的按钮,弹出的事件 定义一个Result的变量
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- Java基础常见英语词汇
Java基础常见英语词汇(共70个) ['ɔbdʒekt] ['ɔ:rientid]导向的 ['prəʊɡræmɪŋ]编程 OO: object ...
- Java英文单词Java基础常见英语词汇
Java英文单词Java基础常见英语词汇(共70个) ...
- Java 基础常见知识点&面试题总结(下)，2022 最新版！
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,同步一下最新更新,希望能够帮助你. 前两篇: Java 基础常见知识点&面试题总结(上),2022 最新版 ...
- Atitit 常见的树形结构 红黑树 二叉树 B树 B+树 Trie树 attilax理解与总结
Atitit 常见的树形结构 红黑树 二叉树 B树 B+树 Trie树 attilax理解与总结 1.1. 树形结构-- 一对多的关系1 1.2. 树的相关术语: 1 1.3. 常见的树形结构 ...
随机推荐
- 洛谷 - P4567 - 文本编辑器 - 无旋Treap
https://www.luogu.org/problem/P4567 事实证明无旋Treap是不是不可能会比Splay快? #include<bits/stdc++.h> using n ...
- P5445 [APIO2019]路灯
传送门· 对于询问 $(a,b)$ ,感觉一维很不好维护,考虑把询问看成平面上的一个点,坐标为 $(a,b)$ 每个坐标 $(x,y)$ 的值表示到当前 $x$ 和 $y$ 联通的时间和 考虑一个修改 ...
- 08-js流程控制、循环、元素操作
# js流程控制 > 流程控制用于基于不同的条件来执行不同的动作. ### if语句 >if... else ... >if ... else if ... else... > ...
- php使用Socket实现聊天室功能(书中的代码)
这只是一种技术 <?php $host = "127.0.0.1"; // 指定监听的端口,注意该端口不能与现有应用的端口冲突 $port = '9505'; $null = ...
- log4j日志输出格式
%n- 换行 %m - 日志内容 %p - 日志级别(FATAL, ERROR, WARN, INFO, DEBUG or custom) %r - 程序启动到现在的毫秒数 %% - percent ...
- Linq 高级应用实例
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- python面向对象--类的内置函数
#isinstance(obj,cls)判断obj是否是类cls的实例 #issubclass(cls,cls1)判断cls是否是cls1的子类或派生类 class Foo: pass class B ...
- poj 2187 Beauty Contest(平面最远点)
Beauty Contest Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 24431 Accepted: 7459 D ...
- 【Java学习笔记】线程安全的单例模式及双重检查锁—个人理解
搬以前写的博客[2014-12-30 16:04] 在web应用中服务器面临的是大量的访问请求,免不了多线程程序,但是有时候,我们希望在多线程应用中的某一个类只能新建一个对象的时候,就会遇到问题. 首 ...
- 洛谷 P4827 [国家集训队] Crash 的文明世界
题目描述 给你一棵 n 个点的树,对于树上的每个节点 i,求 \(\sum_{j=1}^ndis(i,j)^k\).其中 \(dis(i,j)\) 为两点在树上的距离. 输入格式 第一行两个整 ...