CRainyDay

初步认识VUE

1. Vue.js是什么?

  • 1) 一位华裔前Google工程师(尤雨溪)开发的前端js库

  • 2) 作用: 动态构建用户界面即前端界面

  • 3) 特点:

    ①遵循MVVM模式, M指Model数据, V指View, VM指的是view Model对象

    ②编码简洁, 体积小, 运行效率高, 移动/PC端开发

    ③它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目

  • 4) 与其它框架的关联:

    ①借鉴angular的模板数据绑定技术

    ②借鉴react的组件化虚拟DOM技术

  • 5) Vue包含一系列的扩展插件(库):

    ①vue-cli: vue脚手架

    ②vue-resource(axios): ajax请求

    ③vue-router: 路由

    ④vuex: 状态管理

    ⑤vue-lazyload: 图片懒加载

    ⑥vue-scroller: 页面滑动相关

    ⑦mint-ui: 基于vue的组件库(移动端)

    ⑧element-ui: 基于vue的组件库(PC端)

2. 基本使用

  1. 引入vue.js文件

  2. 创建Vue实例对象(vm), 指定选项(配置)对象

    el : 指定Dom标签容器的选择器
    data : 指定初始化状态数据的对象/函数(返回一个对象)

  3. 在页面模板中使用}}或vue指令, 来显示数据

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<!--
1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现
-->
<!--实现输入框与p标签的显示数据同步更新-->
<div id="app">
<input type="text" v-model="username" />
<p>Hello {{username}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
//创建vm实例
const vm = new Vue({//配置对象
el:'#app',
data:{
username:'Vue!'
}
})
</script>
<!--
MVVM:
model:模型,即数据对象(data)
view:视图,模板页面
viewModel:视图模型,即Vue的一个实例
-->
</body>

3.模板的常见语法

模板(视图)的理解:
动态的html页面, 包含了一些JS语法代码、大括号表达式、指令(以v-开头的自定义标签属性).

(1)双大括号表达式
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据, 可以调用对象的方法

(2)VUE指令:

①强制数据绑定
功能: 指定变化的属性值
完整写法: v-bind:xxx=’yyy’ //yyy会作为表达式解析执行
简洁写法: :xxx=’yyy’

②绑定事件监听
功能: 绑定指定事件名的回调函数
完整写法: v-on:click=’xxx’
简洁写法: @click=’xxx’

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="demo">
<h2>1. 双大括号表达式</h2>
<p>{{content}}</p>
<p>{{content.toUpperCase()}}</p>
<p v-text="tag"></p>
<p v-html="tag"></p>

<h2>2. 指令一: 强制数据绑定</h2>
<a href="url">访问指定站点</a><br>
<a v-bind:href="url">访问指定站点2</a><br>
<a :href="url">访问指定站点3</a><br>

<h2>3. 指令二: 绑定事件监听</h2>
<button v-on:click="test1">点我</button>
<button @click="test2(content)">点我</button><!--带参的方法-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
content:"Hello Vue!!!",
tag:"<a href='https://www.baidu.com/'>test</a>",
url:"https://www.baidu.com/"
},
methods:{
test1(event){//默认事件参数
alert(event);
alert("test1()");
},
test2(value){
alert("test2("+value+")");
}
}
});
</script>

4. Vue对象的常用配置选项

  • ①el:

    指定dom标签容器的选择器, Vue就会管理对应的标签及其子标签

  • ②data: 对象或函数类型
    指定初始化状态属性数据的对象, vm也会自动拥有data中所有属性, 页面中可以直接访问使用
    数据代理: 由vm对象来代理对data中所有属性的操作(读/写)

  • ③methods: 包含多个方法的对象
    供页面中的事件指令来绑定回调, 回调函数默认有event参数, 但也可以指定自己的参数
    所有的方法由vue对象来调用, 访问data中的属性直接使用 this.xxx

  • ④computed: 包含多个方法的对象
    对状态属性进行计算返回一个新的数据, 供页面获取显示
    一般情况下是相当于是一个只读的属性
    利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
    如何给对象定义get/set属性

    在创建对象时指定: get name () {return xxx} / set name (value) {}
    对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})
    
  • ⑤watch: 包含多个属性监视的对象
    分为一般监视和深度监视

    xxx: function(value){}
    xxx : {
        deep : true,
        handler : fun(value)
    }
    

    另一种添加监视方式: vm.$watch(‘xxx’, function(value){})


 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有