Vue2快速入门

rnnf_yyds

于 2024-08-14 23:06:44 发布

阅读量704

点赞数 10

文章标签： vue.js

本文链接：https://blog.csdn.net/rnnf_yyds/article/details/135820622

版权

一、Vue2模板语法

1.1 插值语法

在Demo中通过在线引入的方式去使用vue，在body中引入如下代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

插值语法：{{js表达式或者 data中对应的属性名}},插值语法用于解析标签的内容能将vue实例对象中data数据里的一些属性渲染到页面上，以下代码展示了插值语法的使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{msg}},{{count}}</div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app=new Vue({
           el:"#app",
           data:{
              msg:"嗨咯啊",
              count:1000
           }
        }
        )
    </script>
</body>
</html>

在一个vue实例中，el表示绑定的哪个容器，这里使用的是id选择器进行绑定,而data属性负责放数据,在data中我们放置了俩个属性数据，并且在 id为app的容器中，通过{{}}语法进行渲染到界面上

1.2 指令语法

与插值语法不同的是，指令语法解析标签内容的同时，还能给标签绑定属性，绑定事件

指令的常用形式都是v-????

v-bind的使用

<body>
    <div id="app">
        {{msg}},{{count}}
        <a v-bind:href="msg1">点击我去bilibili</a>
    </div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "嗨咯啊",
                count: 1000,
                msg1: "https://www.bilibili.com/"
            }
        }
        )
    </script>
</body>

上述代码使用v-bind绑定了data数据中的msg1,作为a标签的url路径,v-bind也可以进行简写,将v-bind去掉保持:(冒号)即可

1.3 {{}}插值语法和v-bind解析成表达式执行

插值和v-bind写法中除了写成单一的变量形式，进而去解析到data中的数据，本质上其实就是将写的东西当作js表达式去看待并且执行，看如下代码：


<body>
    <div id="app">
        {{msg}},{{count}}
        <a v-bind:href="msg1">点击我去bilibili</a>
        <div>
            学生姓名:{{school.name}} <br>
            学生年龄:{{school.age}} <br>
            英文名转大写：{{school.engname.toUpperCase()}}

        </div>
    </div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "嗨咯啊",
                count: 1000,
                msg1: "https://www.bilibili.com/",
                school:{
                    name:"李四",
                    age:12,
                    address:"北京",
                    engname:"mick"
                }
            }
        }
        )
    </script>
</body>

上述代码在{{}}中执行了转大写方法，{{}将js表达式解析，结果如下：

二、数据绑定

2.1 单向绑定v-bind

v-bind实现单向绑定数据，v-bind绑定数据只能实现data中的数据变化了，从而页面中数据也跟着变的效果，不能实现页面中数据变化，而data中的数据也变化，示例如下：

<body>
    <div id="app">
        {{msg}},{{count}}
        <a v-bind:href="msg1">点击我去bilibili</a>
        <div>
            学生姓名:{{school.name}} <br>
            学生年龄:{{school.age}} <br>
            英文名转大写：{{school.engname.toUpperCase()}}

        </div>

        <input v-bind:value="msg" type="text" />
    </div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "嗨咯啊",
                count: 1000,
                msg1: "https://www.bilibili.com/",
                school: {
                    name: "李四",
                    age: 12,
                    address: "北京",
                    engname: "mick"
                }
            }
        }
        )
    </script>
</body>

页面效果：

数据的走向只能从上图中的第一条线走

修改input框中的值没有效果,msg的数值没变化

2.2 双向数据绑定

v-model的简写方式：删去冒号以及value,v-model实现双向数据绑定,也就是上图数据走向图中俩条线都能实现走向，具体看如下代码示例：

初始数据如下：

代码：

<body>
    <div id="app">
        {{msg}},{{count}}
        <a v-bind:href="msg1">点击我去bilibili</a>
        <div>
            学生姓名:{{school.name}} <br>
            学生年龄:{{school.age}} <br>
            英文名转大写：{{school.engname.toUpperCase()}}

        </div>

        <input v-bind:value="msg" type="text" />
        <input type="text" v-model:value="count"/>
    </div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "嗨咯啊",
                count: 1000,
                msg1: "https://www.bilibili.com/",
                school: {
                    name: "李四",
                    age: 12,
                    address: "北京",
                    engname: "mick"
                }
            }
        }
        )
    </script>
</body>

修改input框中的值，俩边数据都改变

点击count值，修改数据，俩边也都改变

v-model适用于input这样带value属性的表单，也就是跟用户具有交互的元素，如果使用在h2这样的标签上就报错

<body>
    <div id="app">
        {{msg}},{{count}}
        <a v-bind:href="msg1">点击我去bilibili</a>
        <div>
            学生姓名:{{school.name}} <br>
            学生年龄:{{school.age}} <br>
            英文名转大写：{{school.engname.toUpperCase()}}

        </div>

        <input v-bind:value="msg" type="text" />
        <input type="text" v-model:value="count"/>
        <h2 v-model:x="count"></h2>
    </div>
    <!-- 引入vue包，在线 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg: "嗨咯啊",
                count: 1000,
                msg1: "https://www.bilibili.com/",
                school: {
                    name: "李四",
                    age: 12,
                    address: "北京",
                    engname: "mick"
                }
            }
        }
        )
    </script>
</body>

三、Vue事件监听

3.1 v-on的基本用法

在vue2中我们可以使用v-on来监听事件

    <button v-on:click="handleClick">点击我</button>

在模板方法methods中定义对应的事件处理函数：

    methods: {
      handleClick() {
        // 处理点击事件的逻辑
        console.log('按钮被点击了');
      }
    }

v-on后面跟上相应的事件即可，通过所定义的函数监听执行，比如，鼠标覆盖：

    <button v-on:mouseover="handleClick">点击我</button>

我们还可以监听多个事件：

    <div v-on:click="handleClick" v-on:mouseover="handleMouseOver">
      <!-- 元素内容 -->
    </div>

3.2 事件修饰符

.stop ：阻止事件冒泡。
.prevent ：阻止默认行为。
.capture ：使用事件捕获模式。
.self ：只当事件在该元素本身（而不是子元素）触发时触发回调。

只需在相应的事件后面跟上修饰符即可：

    <a v-on:click.prevent="handleClick">禁止跳转链接</a>

四、Vue2中的生命周期函数

4.1 Vue 2 中常见的生命周期钩子函数

beforeCreate：在实例初始化之前被调用，此时数据观测和事件配置尚未完成，不能访问 data、computed 和 methods 中的方法。
created：实例已经创建完成，此时可以访问 data、computed 和 methods 中的方法，但尚未挂载到 DOM 上，因此还不能操作 DOM。
beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染到页面。
mounted：组件被挂载到 DOM 上，此时可以操作 DOM 元素。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated：数据更新导致的虚拟 DOM 重新渲染和打补丁之后调用。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：实例销毁后调用，此时所有的绑定和实例的监听都被移除，子实例也都被销毁。

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例初始化之前');
  },
  created() {
    console.log('created: 实例创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 挂载开始之前');
  },
  mounted() {
    console.log('mounted: 组件挂载完成');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  updated() {
    console.log('updated: 数据更新后');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
});

五、Vue2中的跳转方式

在 Vue 2 中，常见的页面跳转方式有以下几种：

5.1 使用 `<router-link>` 组件：

    <router-link to="/path/to/page">跳转页面</router-link>

to 属性指定要跳转的路径

5.2 JavaScript 中通过编程式导航

    this.$router.push('/path/to/page');

5.3 通过路由的名称进行跳转

前提是在路由配置中为相应的路由定义了名称

在路由配置文件（通常是 router.js 或类似的文件）中，可以为路由定义名称，例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: UserComponent
  }
];

在组件的方法中，可以使用 this.$router.push({ name: 'User', params: { id: 1 } }) 来进行跳转。

这里的 name: 'User' 指定了要跳转到名为 User 的路由，params: { id: 1 } 则是传递给该路由的参数。

rnnf_yyds

关注

10
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
Vue2快速入门

插值语法：{{js表达式或者 data中对应的属性名}},插值语法用于解析标签的内容能将vue实例对象中data数据里的一些属性渲染到页面上，以下代码展示了插值语法的使用在一个vue实例中，el表示绑定的哪个容器，这里使用的是id选择器进行绑定,而data属性负责放数据,在data中我们放置了俩个属性数据，并且在 id为app的容器中，通过{{}}语法进行渲染到界面上。
复制链接

扫一扫