Vue初识

crainyday

前端 / Vue

发布于：2019年7月28日

字数：1.2k字

时长：5分钟

初步认识VUE

1. Vue.js是什么?

1. 一位华裔前Google工程师(尤雨溪)开发的前端js库
1. 作用: 动态构建用户界面即前端界面
1. 特点:
①遵循MVVM模式, M指Model数据, V指View, VM指的是view Model对象

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

③它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目
1. 与其它框架的关联:
①借鉴angular的模板和数据绑定技术

②借鉴react的组件化和虚拟DOM技术
1. Vue包含一系列的扩展插件(库):
①vue-cli: vue脚手架

②vue-resource(axios): ajax请求

③vue-router: 路由

④vuex: 状态管理

⑤vue-lazyload: 图片懒加载

⑥vue-scroller: 页面滑动相关

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

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

2. 基本使用

引入vue.js文件
创建Vue实例对象(vm), 指定选项(配置)对象

el : 指定Dom标签容器的选择器
data : 指定初始化状态数据的对象/函数(返回一个对象)
在页面模板中使用}}或vue指令, 来显示数据

例子:

<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’

例子:

<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){})