Vue基础知识
Posted 三千翎羽渡凡尘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础知识相关的知识，希望对你有一定的参考价值。
目录
vue基础
Vue.js的定位是一个渐进式框架 前端三大mvvm框架 vue , react ,angular
Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的html/javascript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：
与Angular和React出自巨型公司不同，Vue.js基本上是以作者（尤雨溪/Evan YOU）
hello Vue.
1.引入vue.js库
<script src="vue.js"></script>2.创建vue实例
<script>
new Vue({
el：'#app',
data: {msg:'Hello,Vue.js 2'}
})
</script>3.完整html导
<div id="app">
hello Vue!
</div>4.完整的helloWorld代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>模板语法-文本语法
文本
数据绑定最常见的形式就是使用{{}}语法 (双大括号)
<span> {{message}}</span>也可以使用v-text方法
<span v-text="message"></span>html文本
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
<div id="app">
<div v-html="rawMsg"></div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
rawMsg:'<h1>你好vue</h1>'
}
})
</script>模板语法-属性
给html标签绑定一个属性值应该使用 v-bind:属性名称
以下代码给h1绑定一个新的id和title属性
<div id="app">
<h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
dyId:'best',
dyTitle:'看见我的人一生平安'
}
})
</script>渲染结果是：
<h1 id="best" title="花开富贵邀请您加入相亲相爱一家人">看到我的人一生平安</h1>绑定属性也是可以直接简写：
<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>使用 JavaScript 表达式
在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{4+6}}
{{ ok ? 'YES' : 'NO' }}
{{['飞飞','马飞飞'].join('--')}}
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
条件指令 v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。
<div v-if="isLogin">你好，同学！</div><div id="app">
<div v-if="isLogin">你好：同学</div>
<div v-else="">请登录后操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>v-show指令
另一个用于根据条件展示元素的选项是 v-show 指令
<h1 v-show="isShow">Hello!</h1>v-show 只是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
基本用法
<li v-for="item in items">
{{item}}
</li>
var app=new Vue({
el:'#app',
data:{
items:['angular','react','vue',jquery]
}
})对象循环输出
<li v-for="item in items">
{{item.name}}--{{item.age}}
</li>
var app=new Vue({
el:'#app',
data:{
items:[
{name:"feifei", age:28},
{name:"mf", age:22},
{name:"马飞飞", age:20},
]
}
})key
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
<li v-for="(item,index) in items" :key="index">
{{item}}
</li>
var app=new Vue({
el:'#app',
data:{
items:['飞飞','马飞飞','feifei','mafei']
}
})如果不绑定tip 重复的'mumu' 再列表循环在列表循环会报错
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="app">
<button v-on:click="counter += 1">加 1</button>
<p>按钮被点击了 {{ counter }}次.</p>
</div>
var example1 = new Vue({
el: '#ap',
data: {
counter: 0
}
})事件处理方法
<div id="app">
<button v-on:click="greet">问候</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
name:'Vue.js'
},
methods:{
greet:function(event){
// 'this' 在方法里指向当前 Vue 实例
alert('你好'+this.name+'!');
// 'even' 是元生 DOM事件
if(event){
alert(event.target.tagName)
}
}
}
})
// 也可以用JavaScript 直接调用
app.greet();
</script>事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.once
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
侦听器
Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num++">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 1
},
watch:{
'num': function(nval, oval) {
console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
},
}
});
</script>对象变化监听
我们需要监听对象的属性值是否发生改变用
<div id="app">
<p>计数器: {{ num }}</p>
<button @click="num.age++">点我</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: {age:1}
},
watch:{
'num':{
handler:function(nval, oval) {
console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
},
deep:true
}
}
});
</script>
自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus="">
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>以上是关于Vue基础知识的主要内容，如果未能解决你的问题，请参考以下文章