vue学习02-v-text
vue学习02-v-text
- 引入环境版本，cdn网络引用或者本地js应用
- html的结构，一般是div
- 创建vue实例
- el:挂载点
- v-text指令的作用是设置标签的内容
- 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!-- 开发环境版本-->
<script src="js/vue.js"></script>
<body>
<div id="app">
<h2 v-text="message+'我'+info"></h2>
<h2 v-text="info"></h2>
<h1>帅比{{message}}</h1>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
message: "小飞，你好！",
info: "正在前端学习！"
}
})
</script>
</body>
</html>
效果图：
