Vue安装

npm安装

npm安装

官方 CLI 构建项目

Vue.createApp(Counter).mount(‘#conter’) 是有返回值的
在这里插入图片描述执行会输出啥?
0
张三

createApp 是一个 proxy 对象,拥有很多( num、uname、setup、data、methods、computed、created… )属性和方法

vue 的数据的双向绑定,可以在网页源码里修改属性数据的值

Vite构建项目

使用npm

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+,需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev 

要使用 npm,需要先安装 Node.js。将 替换成自己的项目的名字。
在项目中打开终端命令行输入:

npm init vite@latest <project-name> -- --template vue 
cd <project-name>
npm install - 安装依赖包
npm run dev - 运行 vue 项目 

项目结构

在这里插入图片描述

声明式渲染

在这里插入图片描述在这里插入图片描述

最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):

Message: {{ msg }}

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

组件

用户定义组件属性的方法:

data,methods,props,computed,inject 和 setup

vue定义内置 property的方法:如 $attrs 和 $emit。
$ 前缀 - 避免与用户定义的 property 名冲突

组件实例的所有 property,无论如何定义,都可以在组件的模板中访问。
{{ msg }} 会被替换为组件实例中的 msg 属性的值

v-once 指令 - 一次性插值 - 最好不要使用

加上 v-html=“” 以后,就不需要 {{msg}} 了
绝对不要价格用户提供的 HTML 内容插值渲染,很容易导致 XSS 网络攻击。所以要谨慎使用 v-html

v-bind

因为 v-bind 非常常用,我们提供了特定的简写语法:

<div :id="dynamicId"></div>

在这里插入图片描述

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div> 

这些表达式都会被作为 JavaScript ,以组件为作用域解析执行。

在 Vue 模板内,JavaScript 表达式可以被使用在如下场景上:

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

v-if 指令会基于表达式 seen 的值的真假来移除/插入该p元素。缩写:字符
v-bind 指令来响应式地更新一个 HTML attribute
v-on 指令,它将监听 DOM 事件,v-on 有一个相应的缩写,即 @ 字符

语法糖 - 语法缩写
v-bind: -> :
v-on: -> @
在这里插入图片描述

动态参数

在这里插入图片描述修饰符 Modifiers
修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。

计算属性的 Setter

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐