目录
1.vue基础用法
1.1初步使用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>
<!-- 导入vue库文件 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 希望Vue能够控制下面的这个div,帮我们在把数据填充到div内部 -->
<div id="app">
<p>{
{ message }}</p>
</div>
<script>
//创建vue实例对象
const vm = new Vue({
//表示当前要控制页面上的哪个区域,接收的值是一个选择器
el: '#app',
//data对象就是要渲染的数据
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
1.2体验vue调试工具和数据驱动视图
安装调试工具
1.3vue的指令与过滤器
指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令
属性绑定指令事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
1.3.1内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:
v-text:会覆盖元素内部原有内容
{ { }} : vue提供的语法,专门用来解决v-text 会覆盖默认文本内容的问题。这种((}}语法的专业名称是插值表达式(英文名为:Mustache)v-html:v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-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>
<!-- 导入vue库文件 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 希望Vue能够控制下面的这个div,帮我们在把数据填充到div内部 -->
<div id="app">
<!-- 把username的值渲染到p标签 -->
<p v-text="username"></p>
<hr>
<!-- 会覆盖元素内部原有内容 -->
<p v-text="age">年龄</p>
<hr>
<!-- 插值表达式 -->
<p>性别: {
{ gender }}</p>
<hr>
<!-- 可以把包含HTML标签的字符串渲染为页面的HTML元素 -->
<div v-html="info"></div>
</div>
<script>
//创建vue实例对象
const vm = new Vue({
//表示当前要控制页面上的哪个区域,接收的值是一个选择器
el: '#app',
//data对象就是要渲染的数据
data: {
username: "zhangsan",
age: 30,
gender: "男",
info: '<h2 style="color:aqua;font-weight: bold;">一二三四五六七</h2>'
}
})
</script>
</body>
</html>
1.3.2属性绑定指令
注意:插值表达式只能用在元素的内容节点中ÿ