Vue学习笔记(一)
Vue学习笔记
作者:黄志成
博客:地址
数据绑定 & 第一个应用
直接上代码。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<!-- {{}}双大括号是最基本的文本插值方法,它会自动将我们双向绑定数据实时显示出来. -->
<h1>您好,{{name}}。</h1>
<input type="text" v-model="name" placeholder="请输入您的名字"></input>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
// 通过构造函数直接创建一个Vue的根实例,并启动Vue应用,变量app就代表的这个实例
var app = new Vue({
// el是指定一个页面已存在的元素来挂载Vue实例
el: "#app",
// 声明应用需要双向绑定的数据.建议所有使用的数据都在data里先声明,这样不会吧数据散落在业务逻辑里.
data: {
name: "黄志成"
}
});
</script>
</html>
效果如下:
h1标签的内容根据input输入框的内容变化而变。
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
name: "黄志成"
}
});
app.name = "http://www.webhuang.cn";
</script>
可以随意修改data里的数据。刷新下页面 就会显示
您好,http://webhuang.cn。
{{}}内还可以做简单的运算,三元表达式
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1>{{number/100}}</h1>
<h1>{{isOK ? '确定' : '取消'}}</h1>
<h1>{{text.split(',').reverse().join(',')}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
number: 100,
isOK: false,
text: '123,456'
}
});
</script>
</html>
结果是:
1
取消
456,123
下面来看一下过滤器 vue.js支持在{{}}中添加一个管道符 “|” 对数据进行过滤
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1>{{ text | formatData }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: "abcAIsdaHzcAm",
},
filters: {
formatData: function (value) {
return value.toUpperCase();
}
},
});
</script>
</html>
页面显示
ABCAISDAHZCAM
指令与事件
指令是vue模板中最常用的一项功能,它带有前缀 v- .下面展示几个用法
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1 v-if="isShow">{{ text | formatData }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: "abcAIsdaHzcAm",
isShow: false
},
filters: {
formatData: function (value) {
return value.toUpperCase();
}
},
});
</script>
</html>
当 isShow 为 true 的时候 h1标签则插入 为false的时候则被移除。
v-bind 的基础用途是动态更新HTML上的元素 比如 id class href src 等等
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1 v-if="isShow">{{ text | formatData }}</h1>
<a v-bind:href="aUrl">这是个链接</a>
<img v-bind:src="imgUrl">
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: "abcAIsdaHzcAm",
isShow: true,
aUrl: "http://www.webhuang.cn",
imgUrl: "http://www.webhuang.cn/wp-content/themes/JieStyle-Two/images/avatar.jpg"
},
filters: {
formatData: function (value) {
return value.toUpperCase();
}
},
});
</script>
</html>
当然还有 v-on ,它用来绑定事件监听.例如下面:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1 v-if="isShow">{{ text | formatData }}</h1>
<button v-on:click="hiddenH1">移除上面的内容</button>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: "abcAIsdaHzcAm",
isShow: true,
},
filters: {
formatData: function (value) {
return value.toUpperCase();
}
},
methods: {
hiddenH1: function() {
this.isShow = false;
}
}
});
</script>
</html>
点击一下按钮。上面的h1标签就会被移除.
最后 v-bind 和 v-on 提供了语法糖
<a :href="aUrl">这是个链接</a>
<button @click="hiddenH1">移除上面的内容</button>
计算属性
模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,计算属性就是用来解决该问题的。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1>{{ reversedTetx }}</h1>
<input type="text" v-model="text"></input>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: '123,456'
},
computed: {
reversedTetx: function () {
return this.text.split(',').reverse().join(',');
}
}
});
</script>
</html>
所有计算属性都以函数的形式写在Vue的实例内的computed选项内,最终返回计算后的结果。
如果计算属性依赖的数据变动了,计算属性就会重新执行,视图也会更新。这个比较适合在购物车场景中使用。
这里也可以通过 methods 也可以实现这个功能。使用方法还可以传参,更加方便.但是两者有个更大的区别就是,计算属性是基于它依赖的缓存,一个计算属性所依赖的数据发生变化,它才会重新取值.而使用methods,只要重新渲染就会被重新调用。当遍历大数组和做大量计算时,应该使用计算属性.除非你不希望得到缓存.
下面给出一个例子.
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<h1>{{ getDateForComputed }}</h1>
<h1>Text:{{ text }}</h1>
<input type="text" v-model="text"></input>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: '123,456'
},
computed: {
getDateForComputed: function () {
return Date.now();
}
},
methods: {
getDateForMethods: function() {
return Date.now();
}
}
});
</script>
</html>
v-bind 及class 与 style绑定
给v-bind:class 设置一个对象,可以动态切换class
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<style type="text/css">
.active {
width:200px;
height: 100px;
background-color: red;
}
.error {
border: 3px solid green;
}
.static {
border-radius : 50%;
}
</style>
</head>
<body>
<div id="app">
<div class="static" :class="{ 'active': isActive, 'error': isError }">
</div>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
isActive: true,
isError: true
}
});
</script>
</html>
类名 active 和 error 依赖 数据isActive和isError. 当其为true的时候 div会拥有其类名,对象中也支持多个属性,另外 :class 和class 可以同存.
<!-- 同样还支持数组的形式. -->
<div id="app">
<div class="static" :class="['active','error']">
</div>
</div>
<!-- 数组中也可以使用对象属性. -->
<div id="app">
<div class="static" :class="[{active: isActive},'error']">
</div>
</div>
使用 v-bind:style (:style) 可以给元素绑定内联样式,方法与:class类似,也有对象和数组语法.
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div :style="{ 'color': color, 'fontSize': fontSize }">
Hcheng's Vue course
</div>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
color: 'red',
fontSize: '19px'
}
});
</script>
</html>
一般情况,直接一大串样式不利于阅读和维护,所以一般写在data 或者 computed 里。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div :style="[styleA,styleB]">
Hcheng's Vue course
</div>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
styleA: {
color: 'red',
},
styleB: {
fontSize: '22px',
}
}
});
</script>
</html>
今天的Vue学习就到这里了.之前对vue只是简单的使用.现在将更加深入了解应用层.
写于: 2018年07月22日22:22:43
发表评论