VUE
构建数据驱动的web界面的库，技术上重点在于MVVM的ViewModel层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>{{msg}}</div>
<script src="vue.js"></script>
<script>
var data = {
msg: 'hello'
}
new Vue({
el:'div',
data:data
})
</script>
</body>
</html>
如果要改变显示内容
data.msg = 'world'
data.msg = '瑞源先生'
插值
语法： {{key}}
将数据中的数据同步到页面中的过程；
var data = {
msg:'欧走不力大后天呢 色'
}
var demo = new Vue({
el:'.my-app',
data:data
})
不仅仅可以还可以插在Dom节点内容中，还可以插入到属性中：
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{msg}}</div>
<script src="vue.js"></script>
<script>
var data = {
msg:'瑞源先生早上好',
styles:"color:orange",
id:20
}
var demo = new Vue({
el:'.my-app',
data:data
})
如果我想更改其中一个，可以在后面接着写：
data.styles= 'color:green'
关注的颜色就从橘黄色变成了绿色；
单次插值
- 数据插入页面中，不能再次修改；
###如果我们不想让初始值（只想插值一次）发生变化，我们可以在key前面加上一个 * ,{{ *key}}
<div id="app" class="my-app"><span data-id="{{id}}" style={{*styles}}>关注</span>{{msg}}</div>
这样就一直是橘黄色了；
同样的案例
- 修改文案内容：
data.msg = '瑞源学堂欢迎您！'
- 如果不想修改初始文案的内容（只想插值一次）我们同样可以在key前面加上一个*,{{*key}}，
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{*msg}}</div>
这样文案内容就不会发生变化；
标签过滤
语法{{{key}}}，将数据中的html标签渲染到页面中；
- 我们想在文案中插入一个标签，把“瑞源先生早上好！”改成“【深圳】瑞源先生在上好！”，【深圳】单独用一个标签包裹，加粗；
var data = {
msg:'<strong>【深圳】</strong> 瑞源先生早上好！',
styles:"color:orange",
id:20
}
这样页面会把<strong></strong>标签显示出来；
我们需要这样操作：
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{{*msg}}}</div>
这样就可以了；
插值表达式
插值的过程中，我们可以对插入的数据做运算处理，或调用某些js方法；
- 如果我们想在id数值面前渲染一个人民币的符号￥
<div id="app" class="my-app">{{'￥' + id}}</div>
var data = {
id:20
}
var demo = new Vue({
el:'.my-app',
data:data
})
￥20就渲染出来了
- 我们还可以在{{里面进行运算处理}}，我们可以进行加减乘除，字符串拼接，对数据进行js方法的调用;
- 在里面执行的运算也是要遵循运算符的优先级；
<div id="app" class="my-app">{{'￥' + id * 2 }}</div>
结果为￥40
<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles}}</span></div>
var data = {
styles:'color:orange',
id:20
}
页面渲染为： ￥40color:green
- 如果我们想要color:green为大写
<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles.toUpperCase()}}</span></div>
输出为：￥40COLOR:GREEN
插值过滤器
语法{{ key | filter }}
VUE.JS的9289行为我们提供一些内置的过滤器，我们可以直接对插值调用，
比如我们要对数据id:40的值渲染变成美元$40
<div id="app" class="my-app">{{id | currency}}</div>
var data = {
styles:'color:orange',
id:40
}
var demo = new Vue({
el:'.my-app',
data:data
})
页面渲染为：$40.00
{{id * 3 | currency}}
页面渲染为： $120.00
{{id | currency '¥'}} 可以使$符号转换为人民币￥符号
-
过滤器提供了哪些方法？
- json
- capitalize
- uppercase
- lowercase
- currency
- pluralize
- debounce
大写转换：uppercase
<div id="app" class="my-app">{{id * 3 | currency}}
<p>{{styles | uppercase}}</p>
</div>
COLOR:GREEN
- 小写转换：lowercase
<p>{{tips | lowercase}}</p>
var data = {
styles:'color:orange',
tips:'HEllo,WORLd!',
id:40
}
hello,world!
- 首字母大写 capitalize
- 渲染json格式 json
下面两个可以先跳过，待学了更多知识（v-for,methods等）再回头来学习
- pluralize
功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
参数：{String} single, [double, triple, ...
<div class="test">
{{message}} {{message | pluralize 'item'}} <!--输出: 1 item-->
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'item'}} <!--输出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--输出: 1 st 2 rd 3 rd-->
</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: 1,
lili: [1,2,3],
man: {
name1: 1,
name2: 2,
name3: 3
}
}
})
</script>
- debounce
(1)限制： 需在@里面使用
(2)参数:{Number} [wait] - 默认值： 300
(3)功能：包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。
<div class="test">
<button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
methods: {
disappear: function () {
document.getElementById("btn").style.display= "none";
}
}
})
</script>
动态插值
- 在插入的过程中，动态的对值进行修改；
语法：
computed:{
key:function(){
return newKey
}
}
示例：
<div id="app" class="my-app">
<p>{{result}}</p>
<p>{{result | currency}}</p>
</div>
var demo = new Vue({
el:'.my-app',
computed:{
result:function(){
return 40
}
}
})
页面渲染为
40
$40.00
- 我们来看看result这个函数内的作用域是什么，console.log(this)
var demo = new Vue({
el:'.my-app',
computed:{
result:function(){
console.log(this)
return 40
}
}
})
- this就是Vue实例化对象，在里面能找到result，值为40，function就是在实例化对象上执行，可以访问Vue对象上的属性；
- 可以应用表达式过滤器；
来实现一个输入框的值显示的小例子：(非V-方法）
<div id="app">
<input type="text" id="inp">
<span>{{result}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
value:0
},
computed:{
result:function(){
return this.value * 2
}
}
})
// 当input输入完之后获取它的值，更新demo的value属性
document.getElementById('inp').onkeyup = function(e){
//获取输入框里面输入的值
var val = e.target.value;
//赋值给demo下的value
demo.value = val;
}
</script>
此时在输入框输入数字就会在后面实时显示结果
数据的双向绑定
- vue提供了v-model="",属性值是与vue中绑定数据中的数据；
- 当视图中一些操作，会修改到vue中的数据，同样，vue的数据被修改时会映射到视图中
<div id="app">
<input type="text" id="inp" v-model="value">
<span>{{result | currency}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
value:0
},
computed:{
result:function(){
return this.value
}
}
})
</script>
这样我们也实现了上面一个例子中的双向绑定；
- 以后我们会用到更多的v- 开头的属性；
