Vue.js的简单概念和使用(代码及运行图)
通过Vue实现数据层和视图层的对应对象的自主绑定,由Vue框架进行数据的和绑定自动更新
官网地址:https://cn.vuejs.org/
两个js,第一个是没有压缩过的,第二个是压缩过的
保留压缩过的js
导入文件vue.js文件
代码解析:
Vue 指令
示例:
执行结果
点击后执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{xx}}</p>
<input type="text" v-model="xx"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
xx:456454,
},
methods:{
}
})
</script>
</body>
</html>
输入框中的值改变会和影响上方的显示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<img style="width: 500px; height: 500px;" src="../img/1.jpg" v-show="flog" >
<img style="width: 500px; height: 500px;" src="../img/2.jpg" v-show="age>20" >
<input type="button" value="图片消失" v-on:click="xs()"/>
<img style="width: 500px; height: 500px;" src="../img/1.jpg" v-if="flog" >
<img style="width: 500px; height: 500px;" src="../img/2.jpg" v-if="age>20" >
<p>if else</p>
<img style="width: 500px; height: 500px;" src="../img/1.jpg" v-if="flog" >
<img style="width: 500px; height: 500px;" src="../img/2.jpg" v-else >
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
flog:true,
age:50,
},
methods:{
xs(){
this.flog=false
this.age=10
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--
v-bind 为标签其他的属性动态进行数据绑定
-->
<img v-bind:src="imgurl" />
<img :src="imgurl" />
<input type="button" @click="test1()" value="下一张"/>
</div>
<script>
//创建vue对象
var app = new Vue({
el:"#app",
data:{
array:["img/1.jpg","img/2.jpg","img/3.jpg"],
imgurl:"img/1.jpg",
index:0,
},
methods:{
test1(){
this.index++;
this.imgurl=this.array[this.index];
}
}
})
</script>
</body>
</html>
使用v-for生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入vue.js -->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<select>
<option v-for="c in ctity">{{c}}</option>
</select>
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script>
//创建vue对象
var app = new Vue({
el:"#app",
data:{
ctity:["北京","上海","天津"], //List<String> list = new ArrayList()
users:[{name:"jim1",age:20},{name:"jim2",age:20},{name:"jim3",age:20}] //List<User> list = new ArrayList()
},
methods:{
},
//生命周期钩子函数,在每个生命周期阶段,提供一个函数
/* beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("create")
}, */
mounted() {//vue对象创建完毕,且与标签进行了绑定,类似于 onload
console.log("mounted");// 向后端发送请求,接收后端响应的数据
}
})
/* var s = "";
for (var i = 0; i < ctity.length; i++) {
s+="<option>"+city[i]+"</option>"
} */
</script>
</body>
</html>
辣椒种子: 大佬太优秀了,期待大佬的更多精彩文章,帮忙也看看我的博文,一起加油一起冲!
goyeer(工蚁): 优质博文,干货满满~不愧是我佬,跟着我佬学习,每天都能学到很多知识!!期待我佬来指点一番~!!!!
904531552: 很清晰啊
一个成长中的菜鸟程序猿: 大哥,牛啊!