01-Vue2 介绍与指令的使用

1. Vue核心

1.1. Vue简介

1.1.1. 官网

中文官网Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)https://cn.vuejs.org/

英文官网
Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)https://vuejs.org/

1.1.2. 介绍与描述

VUE是构建于用户界面的渐进式JavaScript框架

1.1.3. Vue的特点

遵循MVVM模式

体积小、编码简洁，执行效率高，适合移动/PC端开发

1.1.4.与其他JS框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术

1.1.5. Vue周边库

vite：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

1.2. 初识Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello！{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false // vue在启动时生成提示关闭
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

VUE的基本使用

1.导入vue.js脚本文件

2.在页面声明一个将要被vue控制的区域

3.创建VUE的实例对象

1.3. 模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}!</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">快去看新番！</a><br>
        <a :href="url">快去看新番！</a>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{ 
                name:'JOJO',
                url:'https://www.bilibili.com/'
            }
        })
    </script>
</body>
</html>

总结：

Vue模板语法包括两大类：

插值语法：

功能：用于解析标签体内容

写法：{{xxx}}(matches)，xxx是js表达式，可以直接读取到data的数据

指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:xxx，xxx同样要写js表达式，可以直接读取到data中的属性

1.4数据绑定

<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'JOJO'
            }
        })
    </script>
</body>

总结：

Vue有2种数据绑定的方式：

单向绑定（v-bind）双向绑定（v-model）

备注：

双向数据绑定一般应用在表单类元素上（如：<input>、<select>、<textarea>等）
v-model:value可以简写为v-model，因为v-model默认收集的是value值

1.5. el与data的两种写法

<body>
    <div id="root">
        <h1>Hello,{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false 
        //el的两种写法：
        // const vm = new Vue({
        //     // el:'#root', //第一种写法
        //     data:{
        //         name:'JOJO'
        //     }
        // })
        // vm.$mount('#root')//第二种写法

        //data的两种写法：
        new Vue({
            el:'#root', 
            //data的第一种写法：对象式
            // data:{
            //     name:'JOJO'
            // }
            //data的第二种写法：函数式
            data(){
                return{
                    name:'JOJO'
                }
            }
        })
    </script>
</body>

总结：

el有2种写法：

创建Vue实例对象的时用el属性
先创建Vue实例，再通过vm.$mount('#root')指定el的值

data有2种写法：

对象式
函数式

由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了

1.6. MVVM模型

MVVM模型

M ：model表示在页面渲染时的数据源

V：View表示在页面渲染的DOM结构

VM：实例对象

<body>
	<div id="app">
		<span ref="span" @click="change($event)">{{ message }}</span>
		<p>{{name}}</p>
		<p>{{ $options}}</p>
	</div>
</body>

总结：

data中所有的属性，最后都出现在了vm身上

vm身上所有的属性及 Vue原型上所有的属性，在Vue模板中直接使用

1.7. Vue中的数据代理

总结：

Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
        通过object.defineProperty()把data对象中所有属性添加到vm上。
        为每一个添加到vm上的属性，都指定一个getter/setter。
        在getter/setter内部去操作（读/写）data中对应的属性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/418924.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！