纠结了好久，又打算开始web了，vue.js是个不错的框架，看一看吧。这不是一个新语言，是一种框架，语法还是JavaScript的语法。
基础
出自https://www.runoob.com/vue2/vue-tutorial.html
新建对象
只需要在header头部引入vue。js文件即可
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
编写一个div,id为FirseVue
<div id="FirstVue"></div>
在/body后编写script代码，创建一个Vue对象，即将id为FirstVue中的所有DOM都实例化为一个js对象，这个对象就是MyVue。el是一个保留字，#FirstVue则为标签选择器，选择id为特定值的标签进行实例化。
<script type="test/javascript">
vat MyVue=new Vue({
el:"#FirstVue"
})
</script>
数据绑定
vue的数据是单向传递，也就是说只能从vue到DOM发送数据，不太能从DOM发送数据到vue。
给div标签添加{{MyData}}，即
<div id="FirstVue">
{{MyData}}
</div>
这个大括号语法叫mystache语法，其中的MyData相当于变量名，之后在js代码中声明一下变量
<script type="test/javascript">
vat MyVue=new Vue({
el:"#FirstVue",
data:{
MyData:"test"
}
})
</script>
data中用来绑定变量，每个变量之间需要使用逗号分隔，这里子定义了一个变量，并且赋值为test。现在打开网页就可以看到有内容显示了。
样式绑定
也可以对标签的属性值进行绑定，使用v-bind属性，如对标签的hidden属性进行绑定，这里v-bind:hidden或者:hidden都行。
<div id="FirstVue" v-bind:hidden="MyHidden">
{{MyData}}
</div>
vue中进行声明
<script type="text/javascript">
var MyVue=new Vue({
el:"#FirstVue",
data:{
MyData:"test",
MyHidden:"hidden"
}
})
</script>
之后再次打开页面可以看到文本已经没了，说明隐藏了。
事件绑定
事件则可以使用v-on绑定，如下所示是内联式，直接写函数名。
<button v-on:click="clickButton()">Click Me</button>
修改js代码，事件绑定写在methods中，该事件的功能是修改MyData变量值。这里的this表示该vue对象实例的局部变量，而不是全局变量。
var MyVue=new Vue({
el:"#FirstVue",
data:{
MyData:"test",
MyHidden:"hidden"
},
methods:{
clickButton:function(){
this.MyData="hhhhhh"
}
}
})
和绑定数据一样，也有简写，使用@代替v-on，即@clickButton和@clickButton一样。
另一个例子，简单计数器
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
事件修饰符
可以使用事件修饰符处理DOM内部细节，通过.来修饰
- .stop：阻止单击事件
- .prevent：提交事件不再重载页面
- .capture：使用事件捕获模式
- .self：只在元素自身触发时触发回调
- .once：事件只能一次，如只能点击一次按钮
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
按键修饰符
可以在监听键盘事件时添加按键修饰符。
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
也可以直接用按键名字，如
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
一些按键名如下
- enter
- tab
- delete（包括删除和退格）
- esc
- space
- up
- down
- left
- right
- ctrl
- alt
- shift
- meta
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
html绑定
使用v-html绑定html代码，如下所示
<div id="MyVue">
...
<div v-html="MyHtml">
</div>
</div>
修改一下data的内容
data:{
MyData:"test",
MyHidden:"hidden",
MyHtml:"<p>hhhh</p>"
}
之后页面中就可以显示出hhhh。
表单绑定
vue是单向传递数据，如何把表单的数据发送给vue呢，vue提供了语法糖可以使用v-model实现反向传递。
主要是两步
- 绑定DOM标签的input事件
- 输入时触发事件函数，函数读取value值发送给vue
也可以使用修饰符，如去掉两边空白v-model.trim=“msg”
文本输入框
添加一个标签，使用v-model绑定变量MyData。
<input type="text" v-model="MyData"/>
之后输入数据的话，它会自动把数据发送到vue，然后赋值给变量。
最终的测试代码如下所示，输入框和变量的值同步的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>。。。。。。</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="FirstVue">
<input type="text" v-model="MyData"/>
{{MyData}}
<button v-on:click="clickButton()">Click Me</button>
</div>
</body>
<script type="text/javascript">
var MyVue=new Vue({
el:"#FirstVue",
data:{
MyData:"test",
MyHidden:"hidden"
},
methods:{
clickButton:function(){
this.MyData="hhhhhh"
}
}
})
</script>
</html>
单选框
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'Runoob'
}
})
</script>
复选框
复选框如果只有一个则数据为逻辑值，多个的话返回一个数组。
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
select列表
接收到的数据好像是value值。
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
过滤器
可以使用|设置过滤器，形式可以是如下所示的两种
{{MyData | filterA | filterB ...}}
{{MyData | filter(arg1,arg2...)}}
例子如下
<input type="text" v-model="MyData"/>
{{MyData | MyFilter}}
vue代码如下，需要编写filters的内容，其中过滤器的第一个参数在这里就是MyData，作为value，如果有arg1或者arg2等参数，将依次称为第二、第三个参数。
var MyVue=new Vue({
el:"#FirstVue",
data:{
MyData:"test",
MyHidden:"hidden"
},
methods:{
clickButton:function(){
this.MyData="hhhhhh"
}
},
filters:{
MyFilter:function(value){
if (!value) return ''
value=value.toString()
return value.charAt(0).toUpperCase()+value.slice(1)
}
}
})
之后再文本输入框中输入英文时，第一个字母会变成大写，成功。
条件判定
vue也可以使用if-else语法，或者是else if语法。
使用可以指定该标签是否显示。
<p v-if="MyIf">sssssss</p>
修改vue的data，若为true，则显示，为false不显示。
data:{
MyData:"test",
MyHidden:"hidden",
MyHtml:"<p>hhhh</p>",
MyIf:false
}
组合显示如下所示,else if或者else要紧跟着放在if后面。
<div v-if="Math.random()>0.5">大于0.5</div>
<div v-else>不大于</div>
循环语句
使用v-for实现循环功能，标签中的语法是v-for=“site in sites”，大致类似于foreach (apple in fruits){}。
可以用普通的标签，也可以用列表标签。
<div v-for="city in cities">{{city.name}}</div>
<div>
<ol>
<li v-for="city in cities">
{{ city.name }}
</li>
</ol>
</div>
vue的data中cities是一个数组，大括号里面一定要用冒号赋值，不能用等号
data:{
MyData:"test",
MyHidden:"hidden",
cities:[
{name:"西安"},
{name:"延安"}
]
}
其实{name:“延安”}相当于一个对象吧，可以这么写
<div v-for="city in cities">{{city.num}}</div>
<div>
<ol>
<li v-for="city in cities">
{{ city.name }}
</li>
</ol>
</div>
vue的data代码如下，添加了一个num键。
data:{
MyData:"test",
MyHidden:"hidden",
cities:[
{name:"西安",num:20},
{name:"延安",num:10}
]
}
其中的参数还可以扩展为v-for="(value,key,index) in object，分别为值，键和索引，这里object是一个对象，如
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '梦想！'
}
}
也可以直接迭代数字，如v-for=“n in 10”。
计算属性
getter
可以通过computed完成一些计算，如下所示。其实这里面的ReverseMyData类似于一个getter，获取MyData的数据处理然后返回。
{{MyData}}
......
{{ReserveMyData}}
...
data:{
...
computed:{
ReverseMyData:function(){
return this.MyData.split('').reverse().join('')
}
}
}
之后ReverseMyData的内容和MyData一样了，只不过反转了。
computed和methods功能差不多，但是computed依赖于其依赖缓存，只有相关依赖关系变了才会重新回去值。而methods在重新渲染的时候总会重新调用一下。
computed性能会更好。
setter
也可以设置setter进行赋值，修改computed中的内容，添加一个变量声明，写get和set两个方法，其中setter方法需要有个参数，之后调用即可。
computed:{
ReserveMyData:function(){
return this.MyData.split('').reverse().join('')
},
MyGetterSetter:{
get:function(){
return this.MyData
},
set:function(NewValue){
var Data=NewValue
this.MyData=Data
}
}
}
......
MyVue.MyGetterSetter="halohalo";
监听属性
通过watch监听属性也可以修改内容，如例子是将米和千米互换。
千米：<input type="text" v-model="Kilometer">
米：<input type="text" v-model="Meter">
vue的data中添加watch，然后调用一下实例方法，这里监听Keilometer，当Keilometer发生变化时，调用该实例方法。
watch:{
Kilometer:function(Value){
this.Kilometer=Value
this.Meter=this.Kilometer*1000
},
Meter:function(Value){
this.Meter=Value
this.Kilometer=this.Meter/1000
}
}
......
MyVue.$watch('Kilometer',function(NewValue,OldValue){
...
})
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
