Vue基础以及指令, Vue组件
Vue基础篇一
Vue指令
Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上.
<div id="app">
<p v-text="a"></p>
<div v-html="b"></div>
</div> <script>
const app = new Vue({
el: "#app",
data: {
a: "A",
b: `<h1>B</h1>`
}
})
</script>
v-text, v-html
<div id="app">
用户名：
<input type="text" v-model.lazy.trim="name">
手机号：
<input type="text" v-model.number="phone">
<pre>{{name}}</pre>
{{typeof phone}} <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> {{article}} <select v-model="from">
<option value="1">河北</option>
<option value="2">山西</option>
</select> <select v-model="where" multiple>
<option value="1">上地</option>
<option value="2">西二旗</option>
<option value="3">三里屯</option>
</select> {{from}}
{{where}}
</div>
<script>
// input
// textarea
// select const app = new Vue({
el: "#app",
data: {
name: "",
phone: "",
article: "这是一大段文本~~~",
from: null,
where: [] }
})
</script>
v-model
<div id="app">
<h1>展示你们的爱好</h1>
<ul>
<li v-for="hobby in hobby_list">{{hobby}}</li>
</ul>
<h1>展示你们喜欢吃的食物</h1>
<ul>
<li v-for="food in food_list">{{food.name}}它的价格是: {{food.price}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
hobby_list: ["美女", "LOL", "吃鸡"],
food_list: [
{
name: "臭豆腐",
price: 6,
},
{
name: "榴莲",
price: 100,
}
]
}
})
</script>
v-for
<style>
.active{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<a :href="path">@陈润</a>
<a v-bind:href="path">@陈润</a>
<div v-bind:class="{active: show}">盒子</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
path: "http://www.baidu.com",
show: false
}
})
</script>
v-bind
<style>
.active{
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<a :href="path">@chenrun</a>
<button @click="on_click">点我显示盒子的样式</button>
<div :class="{active: show}">盒子</div>
<div v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}">鼠标事件</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
path: "http://www.baidu.com",
show: false
},
methods: {
on_click: function() {
this.show = ! this.show
},
onMouseenter: function() {
console.log("鼠标移入了")
},
onMouseleave: function() {
console.log("鼠标移除")
}
}
})
</script>
v-on
<div id="app">
<div v-if="role == 'vip'">
<h1>欢迎会员登陆</h1>
</div>
<div v-else-if="role == 'vvip'">
<h1>您的专属秘书为您服务</h1>
</div>
<div v-else>
<p>gun~~~~</p>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
role: "vip",
}
})
</script>
v-if
<div id="app">
<button @click="on_click">点我</button>
<p v-show="show">Alex DSX</p> <p v-if="a == 'if_show'">DSX</p>
<p v-else>Alex</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
show: false,
a: "if_show"
},
methods:{
on_click: function() {
this.show = ! this.show
}
}
})
//if appendChild
//show display
</script>
v-show
<div id="app">
用户名: <input type="text" v-model.lazy.trim="username"><br>
{{username}}
手机号: <input type="text" v-model.number="phone"><br>
{{phone}}
</div>
<!--//main.js-->
<script>
var app = new Vue({
el: '#app',
data: {
username: "",
phone: "",
}
})
</script>
修饰符
<style>
.active{
width: 100px;
height: 100px;
border: solid 1px red;
background: #eeeeee;
}
</style>
</head>
<body>
<div id="app">
<div class="active" v-pin.right.bottom="show"></div>
</div>
<script>
Vue.directive("pin", function(el, binding){
console.log(el);
console.log(binding);
let val = binding.value;
let positions = binding.modifiers;
if(val){
for(let key in positions){
el.style.position = "fixed";
console.log(key);
el.style[key]=0;
}
}else{
el.style.position = "static";
}
});
const app = new Vue({
el : "#app",
data: {
show: true,
}
})
</script>
自定义指令
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="math"></td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="english"></td>
</tr>
<tr>
<td>物理</td>
<td><input type="text" v-model.number="physics"></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum_num}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
math: 95,
english: 55,
physics: 100,
},
computed: {
sum_num: function(){
let total = this.math + this.english + this.physics;
return total
},
average: function(){
let ret = Math.round(this.sum_num/3);
return ret
} }
})
</script>
计算属性
Vue计算属性
我们的模板表达式非常遍历,但是逻辑复杂的时候,模板会难以维护,vue提供了计算机属性.
我们用方法也能达到效果,那么我们为什么要计算属性呢~
其实在vue中方法和计算属性达到的效果是一样的,但是计算属性时基于依赖进行缓存的.
只有依赖的数据发生改变的时候,才会重新执行计算属性的函数, 每次调用都会从缓存中拿之前算好的数据.
而方法时没调用一次,执行一次.
Vue过滤器
过滤器时在数据到达用户的最后异步进行简单的过滤处理,复杂的还要用计算属性或者方法.
<div id="app">
<div>
<p>价格展示</p>
<input type="text" v-model="price">
{{price | currency('USD')}}
</div>
<div>
<p>换算</p>
<input type="text" v-model="meters">
{{meters | meter}}
</div>
</div>
<script>
Vue.filter('currency', function (val, unit){
console.log(val);
console.log(unit);
val = val || 0;
var ret = val + unit;
return ret
});
Vue.filter('meter', function(val){
val = val || 0;
return (val/1000).toFixed(2) + "米"
});
new Vue({
el: "#app",
data: {
price: 10,
meters: 10,
}
})
</script>
过滤器
Vue基础以及指令, Vue组件的更多相关文章
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- Vue基础（三）---- 组件化开发
基本结构: ◆1.组件化开发思想 ◆2.组件注册 ◆3.Vue调试工具用法 ◆4.组件间数据交互 ◆5.组件插槽 ◆6.基于组件的案例 ◆1.组件化开发思想 优点: 提高开发效率 方便重复使用 简 ...
- 前端-Vue基础3（父子组件交互）
1.子组件往父组件传值 点击子组件的值,子组件自增,父组件的值也跟着自增 通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法 点击子组件触发cli ...
- Vue基础之初识Vue
Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
随机推荐
- lzugis——Arcgis Server for JavaScript API之自定义InfoWindow
各位看到这个标题不要嫌烦,因为本人最近一直在研究相关的问题,所以相关文章也只能是这些,同时希望看过我的文章的朋友,我的文章能够给你帮助. 在前面的两篇相关的文章里面,实现InfoWindow是通过di ...
- virtual box 安装 centos 7 不能上网问题解决总结
http://blog.csdn.net/u013264730/article/details/51146359 1.设置virtualbox 网络选项 [root@centos1 ~]# cat / ...
- 旧书重温：0day2【10】第五章 堆溢出利用2
好久没有发帖子啦!最近一直很忙!但是还是抽空学习啦下! 前段时间匆匆忙忙的把0day2上的堆溢出实验做啦! 可能当时太浮躁啦,很多细节没注意!结果:实验结果很不满意!所以就有啦这一篇!! 上一篇是发布 ...
- Android中Activity的LauchMode(加载模式)
1.standard模式:一个task有多个Activity,一个Activity可以被实例化多次,可以放在不同的task中. 2.singleTop模式:该Activity在栈顶,同时收到启动该Ac ...
- Linq:Grouping Operators
[Category("Grouping Operators")] [Description("This sample uses group by to partition ...
- 【java规则引擎】一个基于drools规则引擎实现的数学计算例子
最近在研究JBPM工作流引擎,发现JBPM是基于Drools的,官方文档查看得知Drools是一款规则引擎.兴趣之下,仔细了解了下 Drools,Drools作为JBoss出品的一款开源推理和规则引擎 ...
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...
- spring的<array>标签错误
1,复习了一下spring xml的配置 单个默认命名空间 我们看到,在配置文件中,beans,bean等元素我们是没有使用命名空间前缀的.重复限定一个要在命名空间中使用的元素或属性可能会非常麻烦.这 ...
- 记一次印象有点深刻的坑（bug）
1.该模块的主要功能介绍 该系统是一个网上课程预约系统. 学生进行口语预约(没上课前可以进行取消)--> 等待上课 --> 上完课老师进行完成的确认操作. 2.问题描述 看下图,现在出现的 ...
- 第14篇 PSR-3规范（日志）
1. Specification 1.1 Basics The LoggerInterface exposes eight methods to write logs to the eight RFC ...