Vue.js简单入门
Posted 前端技术博文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js简单入门相关的知识，希望对你有一定的参考价值。
一、vue.js是什么
Vue 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。
Vue 完全能够为复杂的单页应用提供驱动。
Vue 的核心库只关注视图层。
Vue的核心是采用简洁的模板语法来声明式地将数据渲染进 DOM 系统。
二、基本使用
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的，所有的 Vue 组件都是 Vue 实例。
实例的属性与方法都有前缀 $，以便与用户定义的属性区分开来。
创建vue.js的实例过程：
当创建一个 Vue 实例时，可以传入一个选项对象。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
var vm = new Vue({
// 选项
})
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue示例</title>
</head>
<body>
<div id="myApp">
{{message}}
</div>
</body>
<!--在项目中引入vue.js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建一个 Vue 实例
var myApp=new Vue({
el:'#myApp',
data:{
message:"hello world"
}
})
//修改data中的值
myApp.message="ceshi";
</script>
</html>
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
注意：只有当实例被创建时 data 中存在的属性才是响应式的。
三、指令
带有前缀 v-被称为指令。以表示是 Vue 提供的特殊特性。它们会在渲染 DOM 上应用特殊的响应式行为。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 javascript 表达式。
v-on 指令绑定事件监听器，缩写为@
v-for 指令可以绑定数组的数据来渲染一个项目列表
v-if指令是条件判断
v-model 指令实现双向数据绑定。
v-bind 指令可以用于响应式地更新 HTML 属性，缩写为：
示例1:v-if
<!--html-->
<div id="myApp3">
<p v-if="show">显示</p>
</div>
//js
var myApp3 = new Vue({
el: "#myApp3",
data: {
show: true
}
})
示例2:v-for
<!--html-->
<div id="myApp4">
<ol>
<li v-for="item in items">{{item.text}}</li>
</ol>
</div>
//js
var myApp4=new Vue({
el:"#myApp4",
data:{
items:[
{text:"测试1"},
{text:"测试2"},
{text:"测试3"}
]
}
})
示例3：v-on
<!--html-->
<div id="myApp5">
<p>{{message}}</p>
<button v-on:click="reverseBtn">逆转消息</button>
</div>
//js
var myApp5=new Vue({
el:"#myApp5",
data:{
message:"hello world"
},
methods:{
reverseBtn:function () {
this.message=this.message.split('').reverse().join('')
}
}
})
示例4：v-modal
<!--html-->
<div id="myApp6">
<p>{{message}}</p>
<input v-model="message" />
</div>
//js
var myApp6=new Vue({
el:"#myApp6",
data:{
message:"hello world"
}
})
示例5：v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
示例6：v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
（一）参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
示例：href属性<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
（二）修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
示例：<form v-on:submit.prevent="onSubmit">...</form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
以上是关于Vue.js简单入门的主要内容，如果未能解决你的问题，请参考以下文章