一.使用
1.引入
- 可以引入在线的,
- 也可以下载下来保存到本地,建议下载下来, 保存到本地,可以方便在没有网络的情况下也能进行测试
在线地址:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
下载到本地文件直接按存放地址引入:
<script src="vue.js"></script>
2.初始化VUE
- 要new使用,参数为对象,对象的内部为配置信息,也叫选项 const vm = new Vue(options);
3.options解析
- Vue的配置信息,对象数据,键名由Vue指定,值由Vue约束
- 内含多个选项,如:el,data,methods,computed等…
vue管理之后,由数据影响视图,数据本质为变量
4.el选项(标记需要使用vue的容器)
- 用来标记需要使用vue渲染的容器
<body>
<div id="app">
</div>
</body>
<script>
const vm = new Vue({
el:"#app"//需要使vue渲染的容器
})
</script>
5.data选项 + 模板语法-插值
- 用于设置vue实例中需要使用的数据 插值语法
1.{{变量}}
- 中间写变量进行解析vue中的数值
2.data:用来定义变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id ="app">
<!-- 解析data中的msg -->
<!-- v-bind 为绑定属性方式,title会带来鼠标悬停效果 -->
<div v-bind:title="tit">{{msg}}</div>
</div>
</body>
<!-- 引入vue -->
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:"#app", //指定使用vue的容器,建议使用ID命名
data:{
msg:"hello vue",
tit:"鼠标悬停效果"
}
})
</script>
</html>
运行结果:
二.模板语法-指令
1.vue提示的固有指令
指令 | 功能 |
---|---|
v-text | 模板语法-插值-不解析html |
v-html | 模板语法-插值-解析html |
v-show | 条件判断 |
v-bind | 绑定属性 |
v-else | 条件判断 |
v-else-if | 条件判断 |
v-for | 列表循环 |
v-on | 绑定事件 |
v-model | 双向数据绑定,主要用于表单控件 |
v-slot | 插槽 |
v-pre | 跳过这个元素和他的子元素的编译过程 |
v-cloak | 这个指令保持在元素上直到关联实例结束编译 |
v-once | 只渲染元素和组件一次 |
2.插值语法
{{}}, v-text(不会解析标签), v-html(会解析标签)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id ="app" style="border:solid 2px #aaa;padding:20px;">
<div v-bind:title="tit">{{msg1}}</div>
<div v-bind:title="tit">{{msg2}}</div>
<div v-text="msg1"></div>
<div v-text="msg2"></div>
<div v-html="msg1"></div>
<div v-html="msg2"></div>
</div>
</body>
<!-- 引入vue -->
<script src="vue.js"></script>
<script>
const vm = new Vue({
el:"#app", //指定使用vue的容器,建议使用ID命名
data:{
msg1:"hello vue",
msg2:"<mark>vue</mark>"
}
})
</script>
</html>
运行结果:
3.双向绑定
v-model
- 用在表单元素身上,不同的表单控件,表示不同的含义
- 表示当前表单控件的状态
- 输入框->内容
- 复选项->选中状态
- 下拉菜单->当前选项
文本域->内容
…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span>{{a}}</span> - <input type="text" v-model="a" /><br>
<span>{{b}}</span> - <input type="radio" name="sex" v-model="b" value="男" />男<br>
<input type="radio" name="sex" v-model="b" value="女" />女<br>
<span>{{c}}</span> - <input type="checkbox" v-model="c"/><br>
<span>{{d}}</span> - <select name="" v-model="d">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select><br>
<span>{{e}}</span>
<input type="checkbox" v-model="e" name="like" value="蓝球"/>篮球
<input type="checkbox" v-model="e" name="like" value="足球"/>足球
<input type="checkbox" v-model="e" name="like" value="排球"/>排球
<input type="checkbox" v-model="e" name="like" value="羽毛球"/>羽毛球
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
a:"",
b:true,
c:"",
d:"",
e:[]
}
})
</script>
</html>
运行结果:
原理:通过视图改变data中变量的数据,在通过数据影响视图