Vue基础入门

最新推荐文章于 2024-08-08 15:28:54 发布

bestkasscn

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量870

点赞数

分类专栏：前端文章标签： vue.js javascript 前端框架

本文链接：https://blog.csdn.net/bestkasscn/article/details/121962144

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue基础入门

vue简介

简介

vue就是一套前端框架。

vue全家桶

vue（核心库）
vue-router（路由解决方案）
vuex（状态管理方案）
vue组件库（快速搭建页面UI效果的方案）
vue-cli（npm全局包：一键生成工程化的vue项目-基于webpack，一般用于大项目）
vite（npm全局包：一键生成工程化的vue项目，一般用于小项目）
vue-dectools（浏览器插件：辅助调试的工具）
vetur（vscode插件：提供语法高亮和智能提示）

vue的特点

数据驱动视图
双向数据绑定

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分：

View 表示当前页面所渲染的 DOM 结构。
Model 表示当前页面渲染时所依赖的数据源。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。

工作原理：ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

vue的基本使用

步骤

导入vue.js的依赖包

<script src="./lib/vue-2.6.12.js"></script>

或者导入CDN资源（不推荐）

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

在页面中声明一个将要被vue所控制的DOM区域
```
<div id="app">{{username}}</div>
```

创建vue实例对象

<script>
	const vm = new Vue({
        //指定当前vm实例要控制页面的哪个区域
        el:'#app',
        //指定数据源
        data:{
            username:'admin',
        }
    })
</script>

完整版

<body>
    <div id="app">
        {{username}}
    </div>
    //view视图区域
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
	const vm = new Vue({
        //指定当前vm实例要控制页面的哪个区域
        el:'#app',//el指向的选择器及时view视图区域
        //指定数据源
        data:{
            username:'admin',
        }//data指向的对象就是model数据源
    })//整个vm实例就是viewmodel
</script>
</body>

vue的调试工具

安装vue-devtools调试工具

Chorme浏览器安装地址（vue3）：

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

vue的指令与过滤器

概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

指令分类

内容渲染指令

v-text

<body>
    <div id="app">
        //focus on here
        <p  v-text="username"></p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
	const vm = new Vue({
        el:'#app',
        data:{
            username:'admin',
        }
    })
</script>
</body>

效果：

{{}}

<body>
<div id="app">
    //focus on here
    <p>{{username}}</p>
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'admin'
            }
        })
    </script>
</body>

效果：

v-text和{{}}的区别：

v-text 指令会覆盖元素内默认的值，{{}}（差值表达式）不会，在开发中常用{{}}

v-html

将字符串渲染为页面的html元素

<body>
<div id="app">
    //focus on here
    <div v-html="item"></div>
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'admin',
                item:'<h5 style="color: red">this is a test</h5>',
            }
        })
    </script>
</body>

效果：

属性绑定指令

v-bind（可简写为:）：

<body>
<div id="app">
    //focus on here
    <input type="text" v-bind:placeholder="msg">
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'admin',
                msg:'this is a test',
            }
        })
    </script>
</body>

效果：

事件绑定指令

v-on（可简写为@）：

原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup

<body>
<div id="app">
    <div>{{count}}</div>
    //v-on指令绑定点击事件，当点击时触发addCount函数
    <button v-on:click="addCount">点击+1</button>
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'admin',
                msg:'this is a test',
                count:0,
            },
            //函数声明
            methods:{
                addCount(){
                    //通过this.属性名引用
                    this.count++;
                }
            }
        })
    </script>
</body>

addCount()函数同样可以接收到事件对象event

事件修饰符（常用）：

.prevent:阻止默认行为
.stop:阻止事件冒泡

按键修饰符：

.enter：按下回车键时触发绑定的函数
.esc：按下esc键时触发绑定的函数

双向绑定指令

v-model：只能配合表单元素一起使用

修饰符：
- .number 自动将用户的输入值转为数值类型
- .trim 自动过滤用户输入的首尾空白字符
- .lazy 在“change”时而非“input”时更新
条件渲染指令
- v-if
- v-show
  
  v-if 和 v-show 的区别
  
  实现原理不同：
  
  v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
  
  v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；
  
  性能消耗不同：
  
  v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
  
  如果需要非常频繁地切换，则使用 v-show 较好
  
  如果在运行时条件很少改变，则使用 v-if 较好
- v-else-if
- v-else:配合v-if使用
列表渲染指令

v-for：v-for 指令需要使用 item in items 的特殊语法，其中：

items 是待循环的数组

item 是当前的循环项

<body>
<div id="app">
    <div v-for="item in list">用户名：{{item.username}}</div>
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,username:"admin"},
                    {id:2,username: "user"},
                ]
            },

        })
    </script>
</body>

效果：

v-for支持索引寻址：

<body>
<div id="app">
    <div v-for="(item,index) in list">id:{{index}},用户名：{{item.username}}</div>
</div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,username:"admin"},
                    {id:2,username: "user"},
                ]
            },

        })
    </script>
</body>

效果：

使用 key 维护列表的状态：

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种

默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲

染的性能。此时，需要为每项提供一个唯一的 key 属性：

<div v-for="item in itemlist" :key="item.id">

key 的注意事项

key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

bestkasscn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础入门

Vue基础入门vue简介简介vue就是一套前端框架。vue全家桶vue（核心库）vue-router（路由解决方案）vuex（状态管理方案）vue组件库（快速搭建页面UI效果的方案）vue-cli（npm全局包：一键生成工程化的vue项目-基于webpack，一般用于大项目）vite（npm全局包：一键生成工程化的vue项目，一般用于小项目）vue-dectools（浏览器插件：辅助调试的工具）vetur（vscode插件：提供语法高亮和智能提示）vue的特点数据驱动视图
复制链接

扫一扫