vue基础用法 - 详解
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>Vue-快速入门</title>
<script src="js/vue.js"></script>//官方提供js文件
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
}
})
</script>
</html>其运行结果如下，文本框中的数据变化同时，在文本框后面的文字一起变化，两者进行了绑定
vue常用指令
v-bind&v-model
<a v-bind:href="url">test1</a>
<a :href="url">test2</a>
<input type="text" v-model="url">//在此输入框中输入的网址会绑定到url上，同时上方的超链接也会一起变化<script>
new vue({
el: "#app",
data: {
url: "https://www.baidu.com
}
})
</script>v-on
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>常用指令-v-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">
</div>
<script>
new Vue({
el: "#app",
data: {
// 数据部分
},
methods: {
handle: function(){
alert('我被点击了');
}
}
})
</script>
</body>
</html>v-if&v-show
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue常用指令-v-if、v-else-if、v-else、v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if 系列示例 -->
<div>
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
</div>
<!-- v-show 示例 -->
<div>
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
age: 25 // 可修改此数值测试不同条件渲染效果
}
})
</script>
</body>
</html>两者区别
- v-if只将符合条件的内容渲染到页面
- v-show全部渲染，不符合条件的隐藏在页面，但代码存在
v-for
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue常用指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历数组元素 -->
<div v-for="addr in addrs">{{addr}}</div>
<!-- 遍历数组元素并获取索引 -->
<div v-for="(addr, index) in addrs">{{index + 1}}：{{addr}}</div>
</div>
<script>
new Vue({
el: "#app",
data: {
addrs: ['北京','上海','广州','深圳','成都','杭州']
}
})
</script>
</body>
</html>Vue生命周期
浙公网安备 33010602011771号