文档:https://v2.cn.vuejs.org/v2/guide
目录
- [1 第一个Vue程序](#1 第一个Vue程序)
- [2 data数据对象](#2 data数据对象)
- [3 v-text](#3 v-text)
- [4 v-html](#4 v-html)
1 第一个Vue程序
- 导入开发版本的Vue.js
bash
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 创建div,id为app
bash
<div id="app">
{{message}}
</div>
- 创建Vue实例对象, 设置el属性和data属性
bash
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
完整代码
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
2 data数据对象
以下data包括 message,school, campus
bash
data:{
message:"你好 小黑!",
school:{
name:"黑马程序员",
mobile:"400-618-9090"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
显示方式:school.name,campus[1]
bash
{{message}}
{{school.name}} {{school.mobile}}
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
</ul>
完整代码
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
{{school.name}} {{school.mobile}}
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好 小黑!",
school:{
name:"黑马程序员",
mobile:"400-618-9090"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
</html>
3 v-text
bash
data:{
message:"黑马程序员"
}
bash
<h2 v-text="message"></h2>
字符串拼接,v-text里面拼接的字符串是单引号
bash
<h2 v-text="message+'!'"></h2>
<h2>{{message}}!</h2>
完整代码
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
<h2 v-text="message+'!'"></h2>
<h2>{{message}}!</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"黑马程序员"
}
})
</script>
</body>
</html>
4 v-html
bash
data:{
message02:"<a href='http://www.baidu.com'>百度一下</a>"
}
bash
<p v-html="message02"></p>
完整代码
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="message01"></p>
<p v-html="message01"></p>
<p v-text="message02"></p>
<p v-html="message02"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message01:"普通的字符串v-text和v-html没有区别",
message02:"<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
</html>