一、是什么
1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计
1.1 解释:框架譬如angular,是强主张,如果用之---必须使用它的模块机制,必须使用它的依赖注入,必须使用它的特殊形式定义组件(此每个视图框架都一样,难以避免);框架比如react,侵入性看似没有angular强,因为它是软性侵入。
而Vue是渐进式,没有强主张
你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 ---摘自知乎徐飞
二、声明式渲染
1、Vue核心:采用简洁的模板语法来声明式地将数据渲染进DOM
<div id="app"> <p>{{message}}<p> <p v-bind:title="messa">鼠标悬浮时显示title,此时title被Vue绑定了messa(v-表示他们是Vue提供的特殊属性)</p> </div> <script> new Vue({ el: ‘#app‘, //注意不能漏掉# data: { message: ‘hello‘, //方式一:元素内数据渲染 messa: ‘悬浮显示title‘ //方式二:元素属性数据渲染(区于模板渲染( <input value="{{message}}" /> ),属性绑定必须用v-bind: ( <input v-bind:value="message" /> )) } }); </script>
三、条件与循环
<div id="app1"> <p v-if="seen">根据if是否为真判断是否可见,或者说是否运行此行代码</p> </div> <script> new Vue({ el: ‘#app1‘, data:{ seen: true } }); </script>
<div id="app1"> <ul> <li v-for="key in list"> {{key.text}} </li> </ul> </div> <script> new Vue({ el: ‘#app1‘, data:{ list: [ {text: ‘nihao‘}, {text: ‘wohao‘}, {text: ‘dajiahao‘} ] } }); </script>
四、处理用户输入
1、事件
<div id="app1"> <input type="text" name="va" v-bind:value="message"> <a href="javascript:;" v-on:click="btnEvent">绑定点击事件</a> </div> <script> new Vue({ el: ‘#app1‘, data: { message: ‘你好‘ }, methods: { btnEvent: function() { this.message = ‘点击之后,message值改变‘ } } }); </script>
2、表单输入和应用状态之间的双向绑定
<div id="app1"> <input type="text" name="va" v-model="message"> <p> {{message}} </p> </div> <script> new Vue({ el: ‘#app1‘, data:{ message: ‘你好‘ } }); </script>
五、组件化应用构建
//自定义组建 ‘item-list‘ ,并定义该组件包含:li模板(内容数据是自定义属性值中传过来的) + 自定义属性props(包含属性名item(属性值从父级中通过v-bind传过来))---》完成了从父级中传值给子级即:自定义组件) <div id="app2"> <ul> <item-list v-for="key in dataList" v-bind:item="key" v-bind:key="key.id"> </item-list> </ul> </div> <script> Vue.component(‘item-list‘, { props: [‘item‘], template: ‘<li>{{item.text}}</li>‘ }); var app2 = new Vue({ el: ‘#app2‘, data: { dataList: [{ id: 0, text: ‘你好‘ }, { id: 1, text: ‘我好‘ }, { id: 2, text: ‘大家好‘ }] } }); </script>
时间: 2024-10-21 21:09:41