学习地址：https://www.bilibili.com/video/BV1mz4y127UG?p=2
html" title=vue>vue_2">1.引入html" title=vue>vue
html"><!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>
<style type="text/css">
.bgcolor{
background: #F4F456;
padding: 20px;
}
</style>
<!-- 引入html" title=vue>vue -->
<script src="https://cdn.jsdelivr.net/npm/html" title=vue>vue/dist/html" title=vue>vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="bgcolor" id="app">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
}
});
</script>
</html>
2.插值表达式
html"><body>
<div class="bgcolor" id="app">
<!-- 插值表达式 -->
<h2>{{ message }}</h2>
<h2>{{ message }}</h2>
<h2>~~~~~~~~~~~~{{ message }}~~~~~~~~~~~~~</h2>
<h2 v-text="message">~~~~~~~~~~</h2>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
message:'今天好热啊！想吃雪糕！',
}
});
</script>
3.指令v-text
v-text = " "与插值表达式区别：
- v-text对应标签其他内容会被覆盖只留下绑定值
- 而插值表达式{{ }}前后若有其他内容会完整显示
html"><body>
<div class="bgcolor" id="app">
<!-- 插值表达式 -->
<h2>{{ message }}</h2>
<h2>{{ message }}</h2>
<h2>~~~~~~~~~~~~{{ message }}~~~~~~~~~~~~~</h2>
<h2 v-text="message">~~~~~~~~~~</h2>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
message:'今天好热啊！想吃雪糕！',
}
});
</script>
html_92">4.指令v-html
html"><body>
<div class="bgcolor" id="app">
<!-- 插值表达式 -->
<p>{{ tag }}</p>
<!-- v-text -->
<p v-text="tag"></p>
<!-- v-html -->
<p v-html="tag"></p>
<p v-html="tag1"></p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
message:'今天好热啊！想吃雪糕！',
tag:'<strong>i am strong</strong>',
tag1:'<a href="http://www.baidu.com">百度</a>',
}
});
</script>
5.属性绑定 指令v-bind
html"><body>
<div class="bgcolor" id="app">
<!-- 原始方式 -->
<p title="这是title">元素p你好</p>
<!-- v-bind -->
<p v-bind:title="tit">另一个元素p你好</p>
<!-- v-bind简写 -->
<p :title="tit">另一个元素p你好</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
// 数据
data:{
tit:'这是另一个title'
}
});
</script>
6.v-for
简单用法：
html"><ul v-for="person in persons">
<li>{{ person }}</li>
</ul>
-----------------------------------------
data:{
persons:["李星云","姬如雪","张子凡","常昊灵"]
}
复杂用法：
- 可以拿到每一项的下标index；
:key就是v-bind:key=" ",即将一个唯一标识值绑定到属性key。为什么非要这么写？html" title=vue>vue文档规定的。。
html"><ul v-for="(e, index) in lists" :key="e.id">
<li>{{ index }}---{{ e.name }}</li>
</ul>
----------------------------------------------
data:{
persons:["李星云","姬如雪","张子凡","常昊灵"],
lists:[
{id:1, name:"李星云"},
{id:2, name:"姬如雪"},
{id:3, name:"张子凡"},
{id:4, name:"常昊灵"},
]
}
