<!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>
<!-- 准备一个容器 -->
<!-- 什么是指令,有什么作用 -->
<!-- vue框架所有的指令都是以v-开始的 -->
<!-- 插值是写在标签体当中的,指令写在html的属性位置 -->
<!-- Vue框架的指令以属性的形式存在 -->
<!-- 指令的语法规则 -->
<!-- <html标签 v-指令名:参数="表达式"></html标签> -->
<!-- 指令中表达式的语法和插值语法的表达式语法格式一致,但是不能用{{}}括起来 -->
<!-- 不是所有的指令都需要参数或表达式如v-once -->
<!-- 有的指令只需要表达式不需要参数,如v-if -->
<div id="app">
<h1>{{msg}}</h1>
<!-- if的表达式结果需要是true或者false,true会渲染,false不会 -->
<h1 v-if="msg === '123'">v-if测试{{msg}}</h1>
<!-- v-once是指在VUE渲染或者说编译的时候,只对该元素进行一次编译和渲染,此后不再重新渲染 -->
<!-- 避免来回去data内找数据,这是我们开发VUE时一种优化的手段 -->
<h1 v-once>{{msg}}</h1>
</div>
<script>
// Vue程序
new Vue({
el : "#app",
data : {
msg : "Hello Vue"
}
});
</script>
</body>
</html>
<!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">
<h1>{{msg}}</h1>
<!-- 尽管也支持我们自定义标签属性名字和内容,但是这样无意义,因为我们自定义出来的 -->
<!-- 浏览器不认识,没有任何实际效果和实际意义 -->
<!-- 大部分情况下,我们还是要写成html标签支持的属性名,这样才有意义 -->
<span v-bind:xyz="msg"></span>
<!-- 带上单引号以后,把我们这个变量视为常量了,无法取值输出 -->
<span v-bind:xyz="'msg'"></span>
<img v-bind:src="img" :height="height" :width="width">
<img :src="img" v-bind:height="height" v-bind:width="width">
<input type="text" name="username" :value="un">
<!-- 由于v-bind过于常用,有特殊的简写方式 -->
<!-- v-bind可以不写,直接:就可以了 -->
<a :href="Go">百度</a>
<!-- 凡是标签体的语法就用插值语法,方式标签的属性语法就用指令 -->
</div>
<script>
// v-bind详解
// v-bind参数=表达式
// 编译完成后是参数(还是参数)="表达式的执行结果"
// 表达式会关联data,当data发生改变,表达式的执行结果就会发生变化
// 连带就实现了动态效果
new Vue({
el : "#app",
data : {
msg : "Hello",
img : "../../1.jpg",
un : "zhangSan",
height : "30px",
width : "30px",
Go : "http://www.baidu.com"
}
});
</script>
</body>
</html>
