一.Vue初体验:https://blog.csdn.net/qq_43674132/article/details/104857216
二.Vue条件命令:https://blog.csdn.net/qq_43674132/article/details/104857322
三.Vue循环指令:https://blog.csdn.net/qq_43674132/article/details/104857517
四.Vue处理用户输入:https://blog.csdn.net/qq_43674132/article/details/104857651
五.Vue组件初体验:https://blog.csdn.net/qq_43674132/article/details/104857870
六.Vue实例:https://blog.csdn.net/qq_43674132/article/details/104857953
七.Vue模板语法:https://blog.csdn.net/qq_43674132/article/details/104858009
八.Vue计算属性:https://blog.csdn.net/qq_43674132/article/details/104858068
九.Vue.js侦听器:https://blog.csdn.net/qq_43674132/article/details/104860083
十.Vue.js的class绑定:https://blog.csdn.net/qq_43674132/article/details/104861826
十一.Vue style绑定:https://blog.csdn.net/qq_43674132/article/details/104877107
十二.Vue 条件渲染:https://blog.csdn.net/qq_43674132/article/details/104877177
十三.Vue 列表渲染:https://blog.csdn.net/qq_43674132/article/details/104877393
十四.Vue事件处理:https://blog.csdn.net/qq_43674132/article/details/104878173
十五.Vue表单输入绑定:https://blog.csdn.net/qq_43674132/article/details/104879776
十六.Vue中引用图片:https://blog.csdn.net/qq_43674132/article/details/107043105
Vue的点击事件
创建一个click.html页面并引入vue.js代码,详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
v-on:click=" " 表示的是vue的点击事件," "里面写定义方法的名字
先在body里面写个大div,id为app,然后在div标签里面再写一个小div,div里面写个{{message}},然后在到vue对象的data属性里面去定义具体值
第二个div的下面有一个button标签用来触发点击事件**的,先在在button标签里面用v-on:click=" "
然后再到vue对象中写个和data数据同等级的methods属性专门用来定义方法的,
reverseMessage(){
alert("hello liqinggang");
}
效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<!--v-on:click="" 表示的是vue的点击事件," "里面写定义方法的名字-->
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello liqinggang!!!"
},
//vue的方法定义
methods:{
reverseMessage(){
/*第一个this.message:可以访问到我们在data中定义的message变量
通过根据字符串切割、反转、再通过字符串拼接完成字符反转*/
this.message=this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
浏览器效果如下图
Vue的input标签的输入
创建一个input.html页面并引入vue.js代码,详情如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
把输入的变量通过v-model的指令可以给它绑定属性中的message,这样的话在input里面输入的值会自动绑定到
data数据的message变量上去,而message变量发送变化就会导致div中的{{message}}变量也发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<!--把输入的变量通过v-model的指令可以给它绑定属性中的message,这样的话在input里面输入的值会自动绑定到
data数据的message变量上去,而message变量发送变化就会导致div中的{{message}}变量也发生变化-->
<input type="text" v-model="message">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello liqinggang!!!"
}
})
</script>
</body>
</html>
效果如下