1. Vue.js是什么？
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
2. 库和框架的区别
2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)
3. MVVM的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型 虚拟dom
V（修改数据） -> M
M（修改数据） -> V
数据是核心
介绍完了接下来上代码
（一）、插值
1.文本
{{msg}}
2. html
使用v-html指令用于输出html代码
3. 属性
HTML属性中的值应使用v-bind指令
4. 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
- 我的Id是js动态生成的
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的插值案例</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <ul> <li> <h3>文本</h3> {{msg}} </li> <li> <h3>html字符串渲染</h3> <div v-html="htmlStr"></div> </li> <li> <h3>v-bind属性绑定指令</h3> <input type="text" value="22" /> <input type="text" :value="age" /> </li> <li> <h3>表达式</h3> {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} <li v-bind:id="'list-' + id">我的Id是js动态生成的</li> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: 'hello vue!!!', htmlStr: '<span style="color:green;">绿了</span>', age: 88, str:'https://www.baidu.com', number:6, ok:true, id:16 } }) </script> </html>
（二）、指令
指的是带有“v-”前缀的特殊属性
核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-modelv-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-ifv-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style=“display:none”
动态参数
从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
<a v-bind:[attrname]=“url”> …同样地，你可以使用动态参数为一个动态的事件名绑定处理函数
<a v-on:[evname]=“doSomething”> …
注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的指令案例</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <ul> <li> <h3>分支</h3> <div v-if="score >90">A</div> <div v-else-if="score >80">B</div> <div v-else-if="score >70">C</div> <div v-else-if="score >60">D</div> <div v-else="">E</div> <input type="text" v-model="score" /> </li> <li> <h3>v-show指令</h3> <div v-show="flag">出来吧</div> <!--分清楚v-if跟v-show的区别 v-if：控制的是标签是否打印 v-show：控制的是标签的样式 --> <div v-if="flag">出来吧1</div> </li> <li> <h3>v-for指令</h3> <div v-for="item,index in data1"> {{item}}--{{index}}<br> </div> <hr /> <div v-for="item,index in data2"> {{item.id}}-{{item.name}}-{{index}}<br> </div> </li> <li> <h3>动态事件调用</h3> <button v-on:[evname]="xxx">动态事件调用</button> <input type="text" v-model="evname"/> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data: { score: 88, flag: true, data1: [1, 3, 6, 9, 14], data2: [{ id: 1, name: '篮球', }, { id: 2, name: '跳舞', }, { id: 3, name: '唱歌', }], evname:'click' }, methods:{ xxx(){ console.log("xxx方法被调用") } } }) </script> </html>
（三）、过滤器
全局过滤器
Vue.filter(‘filterName’, function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{‘filterName’:function(value){}}
});注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA(‘arg1’, arg2) }}注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的插值案例</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <ul> <li> <h3>局部过滤器的注册</h3> {{msg}}<br /> {{msg|a}}<br /> {{javaxl|a}} </li> <li> <h3>局部过滤器的串联</h3> {{javaxl|a|b}} </li> <li> <h3>全局过滤器的注册</h3> {{javaxl|c}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.filter('c',function(v){ console.log(v) return v.substring(10,16) }) new Vue({ el: '#app', data: { msg: 'https://www.baidu.com', javaxl:'https://www.chenkang.com' }, filters:{ // a是过滤器的名字,后面的函数是过滤器的作用 'a':function(v){ console.log(v) return v.substring(0,16) }, 'b':function(v){ console.log(v) return v.substring(5,10) } } }) </script> </html>
（四）、计算属性监听属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
监听属性 watch，我们可以通过 watch 来响应数据的变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的计算属性监听属性案例</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <ul> <li> <h3>计算属性</h3> 单价：<input v-model="price"/> 数量：<input v-model="num" /> 总价：{{total}} </li> <li> <h3>监听属性</h3> km:<input v-model="km" /> m:<input v-model="m" /> </li> </ul> </div> </body> <script type="text/javascript"> new Vue({ el: '#app', data: { price:16, num:1, km:1, m:1000 }, computed:{ total(){ return parseInt(this.price)*parseInt(this.num) } }, watch:{ km(v){ this.m = v * 1000; }, m(v){ this.km = v/1000; } } }) </script> </html>
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
