前面提到过Angular,这次就讲讲同为前端框架的Vue。
Vue.js是什么?
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如何安装vue.js?
这里介绍两种引入方式:
<1>通过<script>标签引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<2>使用NPM命令安装
npm install vue
vue.js使用:
每个 Vue 应用都需要通过实例化 Vue 来实现,语法如下:
var v = new Vue({
// 代码代码
})
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
<div id="minevue">
<h1>title : {{title}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#minevue',
data: {
title: "helloWord"
},
methods:{
getData:function(){
return this.title;
}
}
})
</script
这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性,实例中属性为: title。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
基础模板语法:
{{}}:数据绑定;
<div id="app">
<p>{{ message }}</p>
</div>
v-html:输出富文本标签内容;
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
v-bind:html属性中的值;
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-if:条件语句;
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
v-else:常与v-if联合使用;
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
v-else-if:用作 v-if 的 else-if 块;
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
*v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-on:监听 DOM 事件;
<form v-on:submit.prevent="onSubmit"></form>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
v-model:双向数据绑定;
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
v-show:根据条件展示元素;
<h1 v-show="true">Hello!</h1>
这次分享就到这里了,感兴趣的朋友可以自己试一下,有html,css,javascript基础者更容易上手哦!
附:个人博客:http://blog.hongxiawangluo.com/
赠:免费vue学习资料视频,关注公众号,回复“ vue课程”获得
全部评论