IDEA中打开项目Vue+Vue基本语法
一、IDEA中打开项目
1.IDEA中安装Vue基本插件
2.项目结构
项目根目录
node_modules
: npm
加载的项目依赖模块
public
:
存放静态资源，如图片、视频等。
src
:
项目源码目录，包含主要的开发文件。
index.html
:
首页入口文件，可以添加
meta
信息或统计代码。
package.json
:
项目配置文件，定义了项目所需的各种模块及配置信息。
README.md
:
项目的说明文档，
markdown
格式。
.gitignore
:
忽略上传到
git
的文件，如
node_modules
和
build
打包文件。
.eslintrc.js
: ESlint
语法检查，代码格式化，优化代码。
babel.config.js
:
转
ES5
语法和配置一些插件。
3.双向绑定 ——
data
data
是组件的核心概念之一，用于定义组件的
响应式数据
。以下是其关键作用及语法详解：
作用
1.
响应式数据容器
data
中定义的数据会被
Vue
自动转换为响应式（通过
Object.defineProperty
劫持数据变
化），当数据变化时，视图会自动更新。
2.
组件状态隔离
通过
data
函数返回新对象，确保每个组件实例拥有独立的数据副本，避免多实例间数据污染。
3.
初始化数据入口
是组件创建时初始化数据的唯一推荐位置。
示例代码
// 正确写法：必须是函数，返回对象data () {return {message : 'Hello Vue!' ,count : 0 ,isVisible : true ,user : { name : 'Alice' , age : 25 }}}
methods
methods
是用于定义组件
可复用逻辑
的核心选项，主要用于处理用户交互、数据操作和业务逻辑。以下
是其作用与语法详解：
// 正确写法：必须是函数，返回对象data () {return {message : 'Hello Vue!' ,count : 0 ,isVisible : true ,user : { name : 'Alice' , age : 25 }}}
作用
1.
事件处理
绑定
DOM
事件（如
@click
）或自定义事件（如
$emit
触发的事件）。
2.
逻辑封装
将复杂操作（如数据计算、
API
调用）封装成可复用函数。
3.
状态修改
通过
this
访问并修改
data
中的响应式数据（需遵循响应式规则）。
4.
组件通信
通过
this.$emit
向父组件传递事件，或调用子组件的引用方法。
入门案例（双向绑定）
-
计数器
二
. vue
基本语法
1. Vue
指令
指令的概念
指令（
Directives
）是
vue
为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构，指令是
vue 开发中最基础、最常用、最简单的知识点。
vue
中的指令按照不同的用途可以分为
6
大类：
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令
（1）内容渲染指令
内容渲染指令用来辅助开发者渲染
DOM
元素的文本内容。常用的内容渲染指令有如下
2
个：
{{ }}v-html
{{ }}
vue
提供的
{{ }}
语法，用于文本内容的渲染，称之为插值表达式
<span>Message: {{ msg }}</span>
v-html
插值表达式只能渲染纯文本内容。如果要把包含
HTML
标签的字符串渲染为页面的
HTML
元素，则需要
用到
v-html
这个指令
:
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
在站点上动态渲染任意的
HTML
是非常危险的，因为它很容易导致
XSS
攻击
。请只对可信内容使用
HTML
插值，
绝不要
将用户提供的内容作为插值。
（2）属性绑定指令
{{}}
语法不能在
HTML
属性中使用，可以使用
v-bind
指令：
<div v-bind:id="dynamicId"></div>
如果绑定的值是
null
或
undefined
，那么该属性将不会被包含在渲染的元素上。
由于
v-bind
指令在开发中使用频率非常高，因此，
vue
官方为其提供了简写形式（简写为英文的
:
）
<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
（3）事件绑定指令
可以使用
v-on
指令
(
通常缩写为
@
符号
)
来监听
DOM
事件，并在触发事件时执行一些
JavaScript
。用
法为
v-on:click="methodName"
或使用快捷方式
@click="methodName"
原生
DOM
对象有
onclick
、
oninput
、
onkeyup
等原生事件，替换为
vue
的事件绑定形式后，分别为：
v-on:click
、
v-on:input
、
v-on:keyup
<div id = "basic-event" ><button @click = "counter += 1" > Add 1 </button><p> The button above has been clicked {{ counter }} times. </p></div>
Vue . createApp ({data () {return {counter : 0}}}). mount ( '#basic-event' )
然而许多事件处理逻辑会更为复杂，所以直接把
JavaScript
代码写在
v-on
指令中是不可行的。因此
v-on 还可以接收一个需要调用的方法名称。
<div id="event-with-method">
<!-- `greet` 是在下面定义的方法名 -->
<button @click="greet">Greet</button>
</div>Vue.createApp({
传递参数
有时也需要在传递参数同时访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
事件修饰符
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `methods` 内部的 `this` 指向当前活动实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM event
if (event) {
alert(event.target.tagName)
}
}
}
}).mount('#event-with-method')
（4）双向绑定指令
vue
提供了
v-model
双向数据绑定指令，用来在不操作
DOM
的前提下，快速获取表单的数据。
文本
(Text)
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
复选框
(Checkbox)
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
（5）条件渲染指令
条件渲染指令用来按需控制
DOM
的显示与隐藏。条件渲染指令有如下两个：
v-ifv-show
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回
truthy
值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以用
v-else
添加一个
“else
块
”
：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>v-else-if ，顾名思义，充当 v-if 的“else-if 块”，并且可以连续使用：
<h1 v-show="ok">Hello!</h1>（6）列表渲染指令
我们可以用
v-for
指令基于一个数组来渲染一个列表。
v-for
指令需要使用
item in items
形式的
特殊语法，其中
items
是源数据数组，而
item
则是被迭代的数组元素的
别名
。
<ul id = "array-rendering" ><li v-for = "item in items" >{{ item.message }}</li></ul>
Vue . createApp ({data () {return {items : [{ message : 'Foo' }, { message : 'Bar' }]}}}). mount ( '#array-rendering' )
在
v-for
块中，我们可以访问所有父作用域的
property
。
v-for
还支持一个可选的第二个参数，即当
前项的索引。
<ul id = "array-with-index" ><li v-for = "(item, index) in items" >{{ parentMessage }} - {{ index }} - {{ item.message }}</li></ul>
Vue . createApp ({data () {return {parentMessage : 'Parent' ,items : [{ message : 'Foo' }, { message : 'Bar' }]}}}). mount ( '#array-with-index' )
2.数组更新检测
Vue
将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()