Vuejs --01 起步
一、是什么
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读