Vue之webpack(一)

最新推荐文章于 2024-04-20 18:55:08 发布

番茄好困

最新推荐文章于 2024-04-20 18:55:08 发布

阅读量570

点赞数

分类专栏： # Vue 文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/nanci9/article/details/122816175

版权

Vue之webpack

1.webpack概念

前端规范：模块化、组件化、自动化、规范化

为了实现前端项目工程化，webpack诞生，webpack是一种前端工程化的解决方案。

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

webpack的手写过程就先看一遍，后面深入研究

2.Vue

Vue是一套用于构建用户界面的前端框架

两个特点：

1.数据驱动视图，数据一旦变化，视图就变化（页面会重新渲染）。数据驱动视图是单向的

2.数据双向绑定，页面一旦变化，数据也变化。

一个最简单的例子：

<!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.js就把vue变成了全局变量 -->
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        {
  { message }}
    </div>
    <script>
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

3.Vue指令

1.内容渲染指令

内容渲染指令用来渲染DOM元素中的文本内容。常用的内容渲染指令：

v-text
{ {}}
v-html

1.v-text:会覆盖标签内原本的内容(缺点)

<p v-text="name">姓名</p>
data: {
     name: 'zhangsan'
}
// 结果是zhangsan，覆盖了里面原本的姓名

2.{ {}}；插值字符串，不会覆盖原来的内容

<div id="app">
        大家好，{
  { message }}
</div>
 data: {
    message: 'Hello Vue!'
}

3.v-html：会解析里面的html代码

<p v-html="text"></p>
data: {
	text: '<span style="color:red;">zhangsan</span>'
}

2.属性绑定指令

v-bind：属性绑定指令

例子：

<input type="text" v-bind:placeholder="tips">
<!-- 简写形式-->
<!--<input type="text" :placeholder="tips">-->
data: {
    tips: '请输入用户名'
}

由于v-bind：使用次数很多，官方推荐简写形式(:)就是一个冒号

在这里插入图片描述

内容渲染指令与属性绑定指令也能进行简单运算

3.事件绑定指令

v-on:事件绑定指令

<p>{
  {count}}</p>
<button v-on:click="addCount">+1</button>
<!--<button @click="addCount">+1</button>-->
var vm = new Vue({
    el: '#app',
    data: {
        count: 1
    },
    methods: {
        addCount(){
            this.count += 1
        }
    }
})

可以在方法里使用this.数据去访问数据

v-on的简写属性@

事件可以传递参数，当不传递参数时，方法默认有一个参数，参数是事件对象，事件对象里面的target属性代表事件源对象，可以利用事件源对象改变背景颜色之类的。

当我们传递参数时，事件对象会被覆盖。那我们就是想传参，又想拿到事件对象，那么传递参数时，必须传递另外的参数，参数是固定写法$event

<button @click="addCount(1,$event)">+1</button>

methods: {
        addCount(n,e){
            ...
        }
 }

4.数据双向绑定指令

注意：上面的指令都只能数据渲染视图，不能视图渲染数据，只有数据双向绑定才能完成

v-model

v-model只能和表单数据绑定，因为只有表单元素才能给用户修改

5.条件渲染指令

v-if
v-show

区别：v-if:每次都是动态的创建元素或删除元素；v-show只是将其display:none而已

v-if配套使用：v-if,v-else-if,v-else

6.列表渲染指令

v-for

    <div id="app">
        <p v-for="(item,index) in list" :key="item.id">id是{
  {item.

最低0.47元/天解锁文章

番茄好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之webpack(一)

Vue之webpack1.webpack概念前端规范：模块化、组件化、自动化、规范化为了实现前端项目工程化，webpack诞生，webpack是一种前端工程化的解决方案。npm install webpack@5.42.1 webpack-cli@4.7.2 -Dwebpack的手写过程就先看一遍，后面深入研究2.VueVue是一套用于构建用户界面的前端框架两个特点：1.数据驱动视图，数据一旦变化，视图就变化（页面会重新渲染）。数据驱动视图是单向的2.数据双向绑定，页面一旦变化，数据也
复制链接

扫一扫