vue的基本使用以及调试工具、指令与过滤器

大月月.

已于 2022-04-20 17:55:51 修改

阅读量965

点赞数 15

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

于 2022-04-20 17:52:35 首次发布

本文链接：https://blog.csdn.net/m0_67280147/article/details/124302294

版权

本文详细介绍了Vue.js的基础使用，包括如何导入和创建vm实例，以及Vue的调试工具vue-devtools的安装和配置。接着深入讲解了Vue的指令，如v-text、v-html、v-bind、v-on及其简写、事件修饰符、v-model和v-if/v-show等。此外，文章还阐述了过滤器的使用，包括定义、串联调用、传参和过滤器在Vue 2.x和3.x版本中的差异。

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

vue基础入门

◆ vue 的基本使用

基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）

// <body>
<!-- 2.在页面中声明一个将要被vue所控制的DOM区域-->
<div id=" app">{
  {username}}</div>
<!-- 1.导入vue.js 的script 脚本文件-->
<script src="./lib/vue-2.6.12. js"></script>
<script>
// 3.创建Vm实例对象(vue 实例对象)
const Vm = new Vue({
// 3.1 指定当前Vm实例要控制页面的哪个区域
el: ' #app',
// 3.2指定Model数据源
data: {
username:' ZS
})
</script>
</body>

基本代码与 MVVM 的对应关系

◆ vue 的调试工具

安装 vue-devtools 调试工具
vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
配置 Chrome 浏览器中的 vue-devtools
点击 Chrome 浏览器右上角的按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项：

注意：修改完配置项，须重启浏览器才能生效！
使用 vue-devtools 调试 vue 页面
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面

◆ vue 的指令与过滤器

指令的概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令
注意：指令是 vue 开发中最基础、最常用、最简单的知识点
1.1内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
⚫ v-text
⚫ { { }}
⚫ v-html
v-text
用法示例：

{ { }} 语法
vue 提供的 { { }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 { { }} 语法的专业名称是插值表达
式（英文名为：Mustache）。

v-html
v-text 指令和插值表达式只能渲

最低0.47元/天解锁文章

大月月.

关注

15
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
11
评论
vue的基本使用以及调试工具、指令与过滤器

vue基础入门◆ vue 的基本使用基本使用步骤① 导入 vue.js 的 script 脚本文件② 在页面中声明一个将要被 vue 所控制的 DOM 区域③ 创建 vm 实例对象（vue 实例对象）// <body><div id=" app">{{username}}</div><scri
复制链接

扫一扫