现在很多前端项目都用vue这个js框架,应该说是很热门的一个框架了,本文通过代码学习vue的一些基础操作,后续再写相关实战内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script lang="javascript">
function alerttest()
{
alert(123);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="abc">
<!--数据绑定-->
<p>{{name}},{{age}}</p>
<!--调用函数-->
<p>{{sayHello()}}</p>
<!--数据绑定之v-html-->
<p v-html="grade"></p>
<!--数据绑定之布尔值-->
<p>{{graduated?"已毕业":"未毕业"}}</p>
<!--数据双向绑定之v-model-->
<p><input type="text" v-model="age"/></p>
<p><textarea v-model="age"></textarea></p>
<p><select v-model="selected">
<option value="a">请选择</option>
<option value="b">香蕉</option>
<option value="c">苹果</option>
</select></p>
<!--是否可见v-if-->
<p v-if="visible">是否可见?{{visible}}</p>
<!--v-else-->
<p v-else>不可见</p>
<!--是否可见v-show与if区别是,show只是不可见,没有从dom移除,而if将完全从dom移除-->
<p v-show="visible">是否可见?{{visible}}</p>
<!--v-bind绑定html属性-->
<p><a v-bind:href="url" target="_blank">跳转到百度</a></p>
<!--过滤器-->
<p>{{name|toUpper}}</p>
<!--v-for 循环数组-->
<div>
<ul>
<li v-for="x in options">{{x}}</li>
</ul>
</div>
<!--v-for 循环对象-->
<div v-for="v in objtest">
{{v}}
</div>
<!--v-for 循环对象,显示key和value-->
<div v-for="(v,k) in objtest">
{{k}}:{{v}}
</div>
<!--v-for 循环对象,显示key和value index-->
<div v-for="(v,k,i) in objtest">
{{i}}:{{k}}:{{v}}
</div>
<!--v-for 循环对象数组,显示key和value index-->
<div v-for="student in objArr">
{{student.name}}-{{student.age}}-{{student.sex}}
</div>
<!--v-on 或@绑定函数-->
<di>
<button v-on:click="say('hello,world!')">v-on测试1</button>
<button v-on:click="test('hi!')">v-on测试2</button>
<button @click="test('hi!')">v-on测试3</button>
</di>
</div>
<script>
var mydata={name:"andy",age:18,sex:"男",grade:"<h1>大一</h1>",
graduated:false,selected:"b",visible:false,url:"https://www.baidu.com",options:[1,2,3,"a","b","c"],objtest:{a:1,b:"你好",c:"china"},
objArr:[{name:"jack",age:18,sex:"F"},{name:"rose",age:18,sex:"M"}]
}
var myVue=new Vue({
el:"#abc",
//data:{
// message:"hello vue.js!"
// },
data:mydata,
methods:{
sayHello:function(){
return this.name+",抢菜抢了个寂寞!";
},
say:function(str)
{
alert(str+this.name);
}
},
filters:
{
toUpper:function(str)
{
if(!str) return ""
str=str.toString()
return str.charAt(0).toUpperCase()+str.slice(1);
}
}
})
myVue.name="andy and rose";
student.age=19;
function test(hi)
{
alert(hi);
}
</script>
</body>
</html>