01-Vue入门搭建与事件

最新推荐文章于 2024-10-10 13:13:22 发布

ZuckD

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量125

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45817392/article/details/120099484

版权

本文详细介绍了Vue.js的基础知识，包括Vue的渐进式特性、主要特点、安装步骤以及核心概念如模板语法、数据绑定、事件处理等。通过实例展示了Vue模板中的插值和指令语法，数据代理以及事件修饰符的使用。同时，文章还探讨了MVVM模型，解释了Vue实例与数据的关系，以及在实际开发中的最佳实践。

摘要由CSDN通过智能技术生成

一、Vue是什么？

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

渐进式：

Vue可以自底向.上逐层的应用
简单应用:只需一个轻量小巧的核心库
复杂应用:可以引入各式各样的Vue插件

后起之秀，生态完善，已然成为国内前端工程师必备技能。

二、Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

2.声明式编码，让编码人员无需直接操作DOM,提高开发效率。

3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

三、Vue安装

1.官方网站：https://cn.vuejs.org/

2.下载vue.js

3.打开VSCode

VSCode插件：open on browser 在浏览器打开html网页

live server 可以在vscode中打开一个5500端口的服务器来访问页面

4.编写html

<!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

5. 安装vue_dev_tools

6.打开F12，验证vue是否存在

输入vue.config

初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3. root容器里的代码被称为[Vue模板] ;
4.Vue实例和容器是一对应的;
5↓真实开发中只有一个Vue实例，并且会配合祥组件起使用:
6.{{xx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;

入门案例：

<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello {{name}}</h1>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false    //阻止vue在启动时生成生产提示
        
        // 创建vue实例
        const x = new Vue({
            el:'#root',  //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{  //'data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name:'尚硅谷'
            }
        })
    </script>
</body>
</html>

分析Hello案例：

1.容器与vue实例的关系是一对一，不能有多个vue实例接管一个容器

模板语法

Vue模板语法有2大类:
1.插值语法
        功能:用于解析标签体内容。
        写法: {{xxx}}, xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
        功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
        举例: v-bind:href="xx" 或简写为 :href="xx", xxx同样要写js表达式，且可以直接读取到data中的所有属性。
        备注: Vue中有很多的指令，且形式都是: v-????, 此处我们只是拿v-bind举个例子。

代码：

<!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>Document</title>
     <!-- 引入vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url" v-bind:x="hello">点我去其他网站</a>
        <a :href="Date.now()" :x="hello">点我去其他网站2</a>
    </div>

    
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false    //阻止vue在启动时生成生产提示
    
    // 创建vue实例
    new Vue({
        el:'#root',  //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{  //'data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'atguigu',
            url:'http://www.baidu.com',
            hello:'你好'
        }
    })
   
</script>

</html>

数据绑定

比v-bind的高级的数据绑定

Vue中有2种数据绑定的方式:
1，单向绑定(v-bind):数据只能从data流向页面。
2. 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
备注:
1.双向绑定一般都应用在表单类元素上(如: input、select等 )
2.v-model:value可以简写为v-model, 因为v -mode1默认收集的就是value值。

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

    </div>

v-model：只能用于表单类，这种需要交互的元素

两种简写方式：

单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">

el与data的两种写法

1.el的两种写法

(1) new Vue时候配置e1属性。
(2)先创建Vue实例，随后再通过vm.$mount(”#root ')指定e1的值。

<script type="text/javascript">
    const v = new Vue({
        //el:"#root",   //第一种
        data:{
            name:'尚硅谷'
        }
    })
    console.log(v);

    v.$mount('#root');  //new完后再绑定
</script>

2.data的两种写法

(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

全写：data:function(){....}

缩写: data(){....}

new Vue({
        el:'#root',
        data() {
            return {
                name: '尚硅谷',
            };
        },
    })

3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一且写了箭头函数，this就不再是Vue实例了。

MVVM模型

MVVM模型
        1. M:模型(Model) :         data中的数据
        2. V:视图(View) :        模板代码
        3. VM: 视图模型(ViewModel):         Vue实例

观察发现:
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue 模板中都可以直接使用。

数据代理

复习Object.defineProperty方法

什么是数据代理？

通过一个对象代理对另一个对象中属性的操作（读/写）

事件处理

事件的基本使用:
1.使用v-on:xx或@xx绑定事件，其中xxx是事件名:
2.事件的回调需要能置在Emethods对象中，最终会在vm上;
3. methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4。methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5. @click="demo"和@click= ”demo($event)"效果一致，但后者可以传参;

<button @click="showInfo($event,99999)">点击弹出信息</button>

showInfo 函数可以传参，包括event鼠标事件和一个数值99999

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'school'
        },
        methods:{
            showInfo(a,number){
                alert("你好")
                alert(number)
                alert(a)
            }
        }
    })
</script>

可以用a来接收鼠标事件，number来接收99999

采用mehtods:{..} 配置项，属于vue里面的配置项。

事件修饰符

Vue中的事件修饰符:
1.prevent:阻止默认事件(常用）
2.stop: 阻止事件冒泡(常用)
3.once: 事件只触发-次 (常用);
4.capture:使用事件的捕获模式;
5.self:只有event. target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

1. Vue中常用的按键别名:
回车=>enter
删除=>delete(捕获"删除”和“退格”键)
退出=> esc
空格=> space
换行=> tab
上=> up
下=> down
左=> left
右=> right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case (短横线命名)
3.系统修饰键(用法特殊) : ctrl、 alt、 shift、 meta
(1).配合keyup使用:按下修饰键的同时，再按下F 其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键( 不推荐)
5. Vue . config . keyCodes.自定义键名=键码，可以去定制按键别名

演示：

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

methods:{
            showInfo(e){
                console.log(e.target.value)
            }
        }

特殊：tab 必须是keydown才行

事件总结

1.修饰符可以连续写

@click.prevent.stop

先阻止默认行为，再阻止冒泡

2.可以连续案件事件

@keyup.ctrl.y

连续按下ctrl + y 触发事件

ZuckD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫