您的位置：首页 > 产品设计 > UI/UE

Vue.js基础语法

2018-01-24 16:50 525 查看

在实际操作中建议定义全局id  即在body标签中给定，不要重复使用new Vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一次测试Vue.js</title>
<!--<script  src="js/vue.min.js"></script>-->
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1{
background: #666;
color: #fff;
}
</style>
<body>
<!--<div id="firstVue1">
<p>
{{ messagefirst }}
</p>
</div>
<hr />
<div id="firstVue2">
<div v-html="message">
</div>
</div>
<hr />
<div id="firstVue3">
<lable for="r1">修改颜色</lable><input type="checkbox" v-model="class1" id="r1">
<br></br>
<div v-bind:class="{'class1':class1}">
看看我的颜色,测试一波v-bind(得到属性中的值) 复选框选中  则使用class1样式,否则不使用
</div>
</div>
<hr>
<div id="firstVue4">
结果：{{6+6}} <br>
三目结果：{{ok?'Yes':'No'}} <br>
字符串反转：{{ message4.split('').reverse().join('')}}<br>
拼接的id:<div v-bind:id="'demo-'+id">{{id}}</div>
<div>
<hr />-->
<!--<div id="firstVue5">
<p v-if="isSeen">测试是否可以进行显示</p>
<template v-if="flag">
<h1>我是标题</h1>
<p>根据v-if来控制是否进行显示！</p>
</template>
</div>
<hr>

<!--测试vue的数据绑定-->
<div id="firstVue6">
<input type="text" v-model="text"/>
{{ text }}
</div>
<hr />

<!--测试v-bind指令下的href-->
<div id="firstVue7">
<pre><a v-bind:href="url">百度。。。。。</a> </pre>
<pre><a v-on:click="doSomething">点击我哈</pre>
<form v-on:submit="subSomething">
<input type="submit" name="haha" id="haha" value="提交" />
</form>
</div>
<hr />

<!--将字符串进行反转-->
<div id="firstVue8">
{{ text }}<br>
<input type="button" v-on:click="reverseString" value="反转字符串"/>
</div>
<hr />

<!--过滤器的设置-->
<div id="firstVue9">
{{ filterText | capitalize }}
</div>
<script>
/*new Vue({
el:'#firstVue1',
data:{
messagefirst:'使用Vue.js 显示文本!'
}
});

new Vue({
el:'#firstVue2',
data:{
message:'<h1>使用Vue.js将html显示在页面上</h1>'
}
});

new Vue({
el:'#firstVue3',
data:{
class1:false
}
});

new Vue({
el:'#firstVue4',
data:{
ok:true,
message4:'zxcvbnm',
id:6
}
});
*/
new Vue({
el:'#firstVue5',
data:{
isSeen:true,
flag:true
}
});

new Vue({
el:'#firstVue6',
data:{
text:'测试数据的绑定！'
}
});

new Vue({
el:'#firstVue7',
data:{
url:'https://www.baidu.com',
},
methods:{
doSomething:function(){
alert("恭喜你中奖了");
},
subSomething:function(){
alert("提交表单！");
}
}
});

new Vue({
el:'#firstVue8',
data:{
text:'abcdefg'
},
methods:{
reverseString:function(){
this.text=this.text.split('').reverse().join('')
}
}
});

new Vue({
el:'#firstVue9',
data:{
filterText:'abcDefg'
},
filters:{
capitalize:function(value){
if(!value) return ''
value=value.toString()
return value.toUpperCase()
/*return value.charAt(0).toUpperCase() + value.slice(1)*/
}
}
})

</script>
</body>
</html>

更多详解推荐网址：http://www.runoob.com/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue

相关文章推荐

新的分享

章节导航