参考视频黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili
一、导包
要先把最主要的Vue包导入才能正式的开始学习,参考文档介绍 — Vue.js (vuejs.org)
运行第一个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>Document</title>
</head>
<body>
<div id="app">
{
{ massage }}
</div>
//两种环境可选
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
massage:'你好',
}
})
</script>
</body>
</html>
el 挂载
针对以下代码的 el (挂载) 属性
var app = new Vue({
el:"#app",
data:{
massage:'你好',
}
})
id选择器 el:"#app" ->推荐
class选择器 el:".app"
标签选择器 el:"div" 等各种标签 标签仅支持双标签 并且不支持body、html标签
data 数据
对应的值可以在里面用{ {key}}表示,数组使用下标表示发,同时
v-text
v-text指令的作用是:设置标签的内容(trxtContent)
默认写法会替代全部的内容,使用差值表达式{ {}}可以替换指定的内容
<body>
<div id="app">
<h2 v-text="massage +'!'"> </h2>
<h2 v-text="info"></h2>
<h2>{
{massage}}+!</h2> <!-- 可实现拼接操作 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
massage:'你好',
info:"小谭工作室"
}
})
</script>
</body>
显示内容:
v-html
v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html
<body>
<div id="app">
<h2 v-text="massage"> </h2>
<h2 v-html="massage"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
massage:"<a href='https://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
显示内容