Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
安装vue之前需要安装node.js默认集尘安装npm
查看npm版本
npm -v
安装vue
$ npm install vue
查看vue版本
vue -V
vue官方文档:https://cn.vuejs.org/v2/guide/instance.html
https://cn.vuejs.org/v2/guide/instance.html
https://cn.vuejs.org/v2/api/
var vm = new Vue({
// 选项
})
el 用于绑定页面已经存在的DOM元素挂载vue实例
<div id="app">
var app = new Vue({
// 等同于 el:'#app'
el: document.getElementById('app')
})
vue实例中的data选项用于声明双向绑定的数据
<div id="app">
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: 'zszxz'
}
})
// zszxz
console.log(app.name)
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-hello-world</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="姓名">
<h3>hello world : {{ name }}</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>
保存为.html文件;浏览器输入框输入 知识追寻者
每个 Vue 实例在被创建时都要经过一系列的初始化过程,在此过程中会运行生命周期钩子的函数;用户可以在不同的阶段添加代码;常用如下
<div id="app"></div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: 'zszxz'
},
created: function(){
// zszxz
console.log(this.name)
},
mounted: function() {
// <div id="app"></div>
console.log(this.$el)
}
})
</script>
“{{}}” 双括号为文本插值方法,能进行数据的双向绑定;当属性name的值发生改变时,{{}}中的内容也会随之改变
<div id="app">{{name}}</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: 'zszxz'
}
})
</script>
如果使用 v-pre 则 {{name}} 括号内容不会被编译
{{}} 还支持简单的运算和三目运算和单个表达式
{{}} 不支持流程控制
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
使用特殊字符 | 可以实现管道过滤功能;
<div id="app">{{data|format}}</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
data : new Date()
},
filters: {
format: function(value) {
var date = new Date(value);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDay();
return year +"-"+ month+ "-"+day;
}
}
})
</script>
串联
{{data|filterA|filterB}
接受参数
其中 argA表示第二个参数,第一个参数是data本身;
{{data|filter(argA,argB)}
使用vue的指令可以很方便的操作DOM;
v-if
表示变量为true时才显示
<div id="app">
<span v-if="show" >知识追寻者</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
show : true
},
})
</script>
v-bind
表示动态的更新HTML标签元素属性的值
<div id="app">
<a v-bind:href="url" >知识追寻者的博客</a>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
url : "https://blog.csdn.net/youku1327"
},
})
// 渲染后为 <a href="https://blog.csdn.net/youku1327">知识追寻者的博客</a>
</script>
v-bind可以使用: 代替 ;
<a :href="url" >知识追寻者的博客</a>
v-on
表示绑定监听事件;
<div id="app">
<p v-if="show">知识追寻者</p>
<button v-on:click = "conceal">点击隐藏</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
show : true
},
methods:{
conceal: function() {
this.show = false;
}
}
})
</script>
除了click监听事件之外还有mousemove, keyup等,参考javascript
v-on 可以直接使用@ 代替 ; <button @click = "conceal">点击隐藏</button>
v-html
直接输出标签,很容易导致 XSS 攻击;可以使用尖括号<>转义
<div id="app">
<span v-html="link"></span></p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
link: '<a href=#>知识追寻者</a>'
}
})
</script>