vue介绍: 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
vue实例:
<!DOCTYPE html>
<html lang="zh-CN">
<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></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<!-- 插值:{{}} 原样输出,不会解析html代码 -->
<p>{{2+3*4}}</p>
<!-- 自动计算 -->
<p v-html="message"></p>
<!-- v-html 指令 解析html等代码-->
<p v-bind:title="message">v-bind:title</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message:" <b>this is message</b>"
}
})
</script>
</body>
<html>
实例为vm ,其中插值使用“{{ }}” 。“{{ }}”其中可以计算也可以原样输出,但不会解析代码。v-html 是一种指令 解析html等代码。v-bind 也是一种指令,绑定属性
v-bind:title绑定属性title。
bind和model:
<!DOCTYPE html>
<html lang="zh-CN">
<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></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-model
不需要指定属性名
双向绑定
v-bind
必须指定绑定属性
单向绑定vm=>属性
-->
<input type="text" v-model="val" >
<input type="text" v-bind:value="val" >
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
val:"文本"
}
})
</script>
</body>
<html>
v-model 不需要指定属性名 双向绑定 v-bind 必须指定绑定属性 单向绑定vm=>属性
v-if和v-show:
<!DOCTYPE html>
<html lang="zh-CN">
<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></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-show
隐藏:display:none 显示:移出display:none样式
v-if
隐藏:删除元素(在dom流中) 显示:添加元素
-->
<p v-show="show">show</p>
<p v-if="show">if</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
show:true
}
})
</script>
</body>
<html>
v-show
隐藏:display:none 显示:移出display:none样式
v-if
隐藏:删除元素(在dom流中) 显示:添加元素