1、模板语法之插值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板语法之插值</title><script src="../js/vue.js"></script>
</head>
<body><!-- 主要研究：{{这里可以写什么}}1、在data中声明的变量、函数等都可以。2、常量都可以。3、只要是合法的javascript表达式，都可以4、模板表达式都被放在沙盘中，只能访问全局变量的一个白名单，如Math和Date等。--><div id="app"><!-- data中生命的 --><h1>{{msg}}</h1><h1>{{sayHello()}}</h1><!-- 常量 --><h1>{{'bjpowernode 6666'}}</h1><!-- javascript表达式 --><h1>{{1 + 20 / 3}}</h1><!-- Math --><h1>{{Math.ceil(3.345)}}</h1></div><script>new Vue({el : '#app',data : {msg : 'bjpowernode',sayHello : function(){console.log('hello');}}})</script>
</body>
</html>
2、模板语法之指令语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模板语法之指令语法</title><script src="../js/vue.js"></script>
</head>
<body><!-- 指令语法：1、什么是指令？有什么作用？2、Vue框架中的所有指令的名字都以"v-"开始3、插值是写在标签体当中的，那么指令写在哪里呢？Vue框架中所有的指令都是以HTML标签的属性形式存在的，例如：<span 指令是写在这里的></span>注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的。4、指令的语法规则：指令的一个完整的语法格式：<HTML v-指令名:参数="表达式"></HTML>表达式：之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么但是需要注意的是：在指令中的表达式位置不能外层再添加一个{{}}不是所有的指令都有参数和表达式：有的指令，不需要参数，也不需要表达式，例如：v-once有的指令，不需要参数，但是需要表达式，例如: v-if="表达式"有的指令，即需要参数，又需要表达式，例如: v-bind:参数="表达式" 5、v-once 指令作用：只渲染元素一次，随后的重新渲染，这可以用于优化更新性能。6、v-if="表达式" 指令作用：表达式的执行结果需要是一个布尔类型的数据：true或falseture：这个指令所在的标签，会被渲染到浏览器当中。false：这个指令所在的标签，不会被渲染到浏览器当中。--><div id="app"><h1>{{msg}}</h1><h1 v-once>{{msg}}</h1><h1 v-if="a > b">{{msg}}</h1></div><script>new Vue({el : '#app',data : {msg : 'bjpowernode',a : 10,b : 5}})</script></body>
</html>
3、v-bind指令详解
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=\, initial-scale=1.0"><title>v-bind指令详解</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-bind指令详解1、这个指令是干嘛的？它可以让HTML标签的某个属性的值产生动态的效果2、v-bind指令的语法格式：<HTML标签 v-bind:参数="表达式"></HTML标签>3、v-bind指令的编译原理？编译前：<HTML标签 v-bind:参数="表达式"></HTML标签>编译后：<HTML标签 参数="表达式的执行结果"></HTML标签>在编译的时候v-bind后面的参数名会被编译为HTML标签的属性名表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化4、v-bind因为很常用，以下是简写方式：<img :src="imgPath">5、什么时候使用插值语法？什么时候使用指令？凡是标签体当中的内容想要动态，需要使用插值语法。只要向让HTML标签的属性动态，需要使用指令语法。--><div id="app"><!-- msg是变量名原则上v-bind指令后面的这个参数名可以随便写--><span v-bind:xyz="msg"></span><!-- 实战 --><input type="text" name="username" value="zhangsan"> <br><!-- 动态调整 --><input type="text" name="username" :value="username"> <br></div><script>new Vue({el : '#app',data : {msg : 'bjpowernode',username : 'lisi'}})</script>
</body>
</html>
4、v-model指令详解
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model指令详解</title><script src="../js/vue.js"></script>
</head>
<body><!-- v-bind和v-model的区别和联系1、v-bind和v-model这两个指令都可以完成数据绑定。2、v-bind是单向数据绑定。data -> 视图3、v-model是双向数据绑定。data <- -> 视图4、v-bind可以使用在任何HTML标签当中，v-model只能使用在表单类元素上例如：input,select,textarea。因为表单才能给用户提供交互输入的界面。v-model指令通常也是用在value属性上5、v-bind和v-model都有简写方式：v-bind简写方式： v-bind:参数="表达式" ====== :参数="表达式"v-model简写方式： v-model:value="表达式" ======= v-model="表达式"--><div id="app"><input type="text" name="username" :value="name2"> <br><input type="text" name="username" v-model="name2"> <br></div><script>new Vue({el : '#app',data : {name1 : 'zhangsan',name2 : 'lisi'}})</script>
</body>
</html>
5、初始MVVM分层思想
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识MVVM分层思想</title><script src="../js/vue.js"></script>
</head>
<body><!-- 1、MVVM是什么？M：Model（模型/数据）V：View（视图）VM：ViewModel（视图模型），VM是MVVM中的核心部分。2、Vue框架遵循MVVM吗？虽然没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。Vue框架基本上也是符合MVVM思想的。3、MVVM模型当中倡导了Model和View进行了分离如果Model和View不分离，使用最原始的原生的javascript代码写项目：如果数据发生任意的改动，接下来我们需要编写大篇幅的操作DOM元素的JS代码。将Model和View分离之后，出现了一个VM核心，这个VM把所有的脏活累活给做了。Model和View互相去更新--><!-- V --><div id="app">姓名：<input type="text" name="username" v-model="name1"></div><script>// VMconst vm = new Vue({el : '#app',// Mdata : {name1 : 'zhangsan'}})</script>
</body>
</html>
