VUE学习笔记01
1:创建好vue项目然后新建一个html，通过cdn的方式引入vue
Vue常用7个属性
1：el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
2：data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
3：template属性
用来设置模板，会替换页面元素，包括占位符。
4：methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
5：render属性
创建真正的Virtual Dom
6：computed属性
用来计算
7：watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，
2:接下来创建一个简单的div使用el:绑定，将新建的vue和元素绑定起来：
<body>
<div id = "app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
});
</script>3：v-bind="…" （指令）类似于 {{ …}}
<span v-bind:title="message">
鼠标悬停查看绑定信息
</span>将鼠标移动到这地方就可以看到绑定信息
4：v-if v-else v-else-if:
<div id = "app">
<h1 v-if="ok">YES</h1>
<h1 v-else>NO</h1>
</div>
<body>
<div id = "app">
<h1 v-if="type ==='A'">A</h1>
<h1 v-else-if="type ==='B'">B</h1>
<h1 v-else>C</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
type: 'A'
}
});
</script>5:循环 v-for
<!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>
<!-- 导入vue.js -->
</head>
<body>
<div id = "app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
items: [
{message:'范涛之'},
{message:'邓思佳'}
]
}
});
</script>
</html>6: 事件：
<body>
<div id = "app">
<button v-on:click="sayHi">click me </button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data: {
message:"范涛之啦啦啦"
},
methods: { //方法必须定义在VUE的Method对象中,v-on：事件
sayHi: function(){
alert(this.message)
}
}
});
</script>
7：vue双向绑定：v-model
<body>
<div id = "app">
输入的文本： <input type="text" v-model="message"></input> {{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
单选框：
<body>
<div id = "app">
性别：
<input type="radio" name="sex" value="男" v-model="qinjiang">男</input>
<!-- v-model 可以进行双向的数据绑定 -->
<input type="radio" name="sex" value="女" v-model="qinjiang">女</input>
选中了谁 :{{qinjiang}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
qinjiang:''
}
});
</script>版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/justleavel/article/details/122944802
内容来源于网络，如有侵权，请联系作者删除！
