目录
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>综合代码学习Vue【一】</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<p>
<!-- 在{{}}中还可以使用Javascript表达式 -->
<span>{{message}}</span>
<!-- v-once 用于一次性赋值，注意如果将v-once用在可手动更改内容的文本输入框，则v-once会失效。-->
<span v-once>{{message}}</span>
<span v-if="show1">txt1</span>
<span v-show="show2">txt2</span>
<!-- v-if标签也适用于Template元素 -->
<span v-if="showtype==='A'">
A_text
</span>
<span v-else-if="showtype==='B'">
B_text
</span>
<span v-else-if="showtype==='C'">
C_text
</span>
<span v-else>
数据为空
</span>
<!--
v-model 在内部为不同的输入元素使用不同的特性【property】并抛出不同的事件，实现表单输入与应用状态的双向绑定。
表单元素中：
(1) text和textarea元素的特性是value，事件是input。
(2) checkbox和radio元素的特性是checked，事件是change。
(3) select元素的特性是value，事件是change。
修饰符有：
(1) trim 用来去掉左右两面空格。
(2) number 将字符串转为有效数字。
(3) lazy 取消input事件后触发，转为change事件后触发。
-->
<input type="text" v-model.trim="message" />
</p>
<!-- v-bind 用于绑定属性，静态参数如 v-bind:class可简写为 :class，动态参数则可简写为 :[key] -->
<p class="static" v-bind:class="class1">
txt3
<span :class="{active:isActive,'text-danger':hasError}">txt2</span>
</p>
<button v-on:click="addItem()">增加一行</button>
<ul>
<li v-for="item,index in array1">
{{index+1}}.{{item.text}}
<!--
v-on 用来绑定事件监听器，静态参数如 v-on:click可简写为 @click，动态参数则可简写为 @[event]。
v-on 还可以使用修饰符，如<form v-on:submit.prevent="onSubmit">...</form>里的.prevent作用就是调用event.preventDefault()，阻止表单默认提交功能【方便ajax方式提交表单】。
-->
<button v-on:click="deleteItem(item.index)">删除此行</button>
</li>
</ul>
<ul>
<!-- 在组件上使用v-for时，v-bind:key选项是必须的。 -->
<!--
注意这里之所以不用<test-item ...></test-item>的写法，是因为在<ul>元素里只有<li>会被认为是有效内容。
所以为了避开潜在的浏览器解析错误，所以这里用<li is="test-item" ...></li>写法来替代：
<test-item v-for="item in array2" :todo="item" :key="item.id"></test-item>
-->
<li is="test-item" v-for="item in array2" :todo="item" :key="item.id"></li>
</ul>
<form v-on:submit.prevent="ajaxSubmit">
<div>
<input type="radio" id="radioButton1" value="radio1" v-model="picked" />
<label for="radioButton1">单选选项一</label>
<input type="radio" id="radioButton2" value="radio2" v-model="picked" />
<label for="radioButton2">单选选项二</label>
<span>{{picked}}</span>
</div>
<div>
<input type="checkbox" id="ck1" value="ck1" v-model="ckvarr"><label for="ck1">复选框一</label></checkbox>
<input type="checkbox" id="ck2" value="ck2" v-model="ckvarr"><label for="ck2">复选框二</label></checkbox>
<input type="checkbox" id="ck3" value="ck3" v-model="ckvarr"><label for="ck3">复选框三</label></checkbox>
<span>{{ckvarr.join(',')}}</span>
</div>
<div>
<!-- 注意这里建议第一项设置一个值为空的禁用选项，方便选择第一项时触发change事件. -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span>{{selected}}</span><br />
<select v-model="selected2">
<option disabled value="">请选择</option>
<option v-for="options in array2" v-bind:value="options.id">
{{options.text}}
</option>
</select>
<span>{{selected2}}</span>
</div>
</form>
</div>
</body>
<script type="text/javascript">
<!-- 全局注册组件,注意component的c要小写,且注册组件代码应该放在调用它的Vue实例创建语句之前
-->
Vue.component('test-item',
{
props:['todo'],
template:'<li>{{todo.id}}.{{todo.text}}</li>'
});
var datas={
message: 'Hello World',
show1: false,
show2: false,
class1: 'blue',
array1: [{
text: 'AAA'
},
{
text: 'BBB'
},
{
text: 'CCC'
}
],
array2:[{
id:1,text: 'AAA'
},
{
id:2,text: 'BBB'
},
{
id:3,text: 'CCC'
}
],
firstName:'姓',
lastName:'名',
isActive:true,
hasError:true,
showtype:'D',
picked:'radio1',
ckvarr:[],
selected:'',
selected2:''
};
/*
1.注意只有在实例创建时的属性才是响应式【实时触发视图更新】的，因此在创建Vue实例时可以预留一些会用到的属性。
2.Vue实例自带的属性和方法名称前可以加$，用来和用户自定义的属性名和方法名区分开。
3.不要在创建Vue实例的属性和回调方法代码中使用箭头函数，因为箭头函数没有this对象。
*/
var vm1 = new Vue({
el: '#div1',
data: datas,
methods: {
deleteItem: function(index) {
this.array1.splice(index, 1);
console.log(index);
},
addItem: function() {
this.array1.push({
text: 'str' + Math.floor(100000*Math.random())+''+new Date().getTime()
})
}
},
created:function(){
//this 指向vm实例
console.log("vm2实例创建时的message值为："+this.message);
},
computed:{
fullName:function(){
return this.firstName+this.lastName;
},
fullName2:{
//getter
get:function(){
return this.firstName+''+this.lastName;
},
//setter
set:function(newValue){
var names=newValue.split(' ');
this.firstName=names[0];
//这里之所以不用if(names.length>1){}是因为要保障同步变化，避免跟旧数据混杂在一起显示【数据污染】。
this.lastName=names[names.length-1];
}
}
},
watch:{
fullName:function(newName,oldName){
console.log('fullName的值已经由\''+oldName+'\' 改为了 \''+newName+'\'')
}
}
});
/*
监听属性变化。注意在注册监听方法前的属性变化不会触发监听方法里的处理。
*/
vm1.$watch('message',function(newVal,oldVal){
console.log('message属性值已由\''+oldVal+'\'更改为了\''+newVal+'\'');
})
//datas.freeze(); //阻止修改现有的属性【property】，因此响应系统不能追踪被冻结的属性变化。
datas.message=123;
console.log(vm1.fullName);
vm1.fullName2="小 明";
console.log(vm1.fullName2);
</script>
<style type="text/css">
.blue {
color: blue;
}
ul {
list-style: none;
}
.static{
line-height: 50px;
}
.active{
color:red;
}
.text-danger{
font-size: 28px;
}
</style>
</html>
运行效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
