Vue
一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷，更加高效。
<head></head>中引入官方文件：https：//v2.cn.vuejs.org/
<script src = "相对路径"></script>
<body></body>中定义视图（与下面数据模型互相影响）
<div id = "app">
<input type = "text" v-model = "message">
{{message}}
// "{{message}}":插值表达式，形式：{{表达式}},内容可为：变量（主）、三元运算符、函数调用、算数运算
</div>
<body></body>外定义vue对象（固定位置），数据模型（与上面视图互相影响）
<script>
new Vue({
el:"#app", //vue接管区域
data:{
message:"Hello vue!"
}
})
</script>
//vue 特性：双向数据绑定
Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义
常用：
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置href,css样式 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器元素或对象的属性 |
注：通过v-bind或v-model绑定的变量，必须在数据模型中声明
v-if指令
v-show指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "../JS/vue.js"></script> //相对地址路径
</head>
<body>
<div id = "app">
年龄<input type="text" v-model = "age">经判定为：
<span v-if = "age <= 35">年轻人</span>
<span v-else-if = "age>35 && age<60" >中年人</span>
<span v-else>老年人</span> //满足哪个显示哪个
<br><br>
<span v-show = "age<35">年轻人</span> //满足条件则显示
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
age:20
},
methods: { //methods与data平级
}
})
</script>
</html>
v-on指令
<input type = "button" value = "按钮" v-on :click = "函数">
<input type = "button" value = "按钮" @click = "函数">
标签：vue,渲染,元素,绑定,Vue,指令 From： https://www.cnblogs.com/liushuosbkd2003/p/17785659.html