青岛百度网站排名优化做网站怎么切片

一、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-if

v-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()