目录
模板语法
1.插值
1.1文本
{ {msg}}
1.2html
使用v-html指令用于输出html代码
1.3属性
HTML属性中的值应使用v-bind指令
1.4表达式
Vue提供了完全的JavaScript表达式支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<style>
.cl{
color: aqua;
}
</style>
<body>
<!-- 定义管理边界 -->
<div id="app">
<h1>{
{ts}}</h1>
<h2>插值</h2>
<ol>
<li>文本</li>
<span>
{
{msg}}
</span>
<li>html</li>
<span v-html="html"></span>
<li>v-bind绑值</li>
<!-- 1)v-model:数据双向绑定
2)v-bind:绑定标签属性值
3){
{}}:插值,针对标签中文本值进行插入操作 -->
<span v-bind:class="cls">
郑业成最帅!
</span>
<li>表达式</li>
<span>
{
{msg.substr(0,6).toUpperCase()}}
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
</span>
</ol>
</div>
</body>
<script>
//每一个vue实例都是从new一个构造函数开始
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
msg:'hello vue!!!',
html:'<input type="text" value="2">',
cls:'cl',
number:10,
ok:false,
id:101
},
methods:{
}
});
</script>
</html>
效果图
注意事项
- v-model:数据双向绑定
- v-bind:绑定标签属性值
- { {}}:插值,针对标签中文本值进行插入操作
2.指令
含义: 指的是带有“v-”前缀的特殊属性
2.1核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
实例代码:
<body>
<!-- 定义管理边界 -->
<div id="app">
<h1>{
{ts}}</h1>
<h2>指令</h2>
<ol>
<li>v-if/v-else-if/v-else</li>
<span v-if="good=='ok'">
沈宴很行
</span>
<span v-else-if="good=='no'">
沈宴不行
</span>
<span v-else>
沈大人,无病呻吟!!!
</span>
</ol>
</div>
</body>
<script>
//每一个vue实例都是从new一个构造函数开始
var vm=new Vue({
el:'#app',
data:{
ts:new Date().getTime(),
good:'ok',
},
methods:{
}
});
</script>
v-show:与v-if类似,只是会渲染其身