Vue工程下的文件夹作用:
①:assets:存放项目中需要用到的资源文件,css、js、images 等。
②:componets: 存放 vue 开发中一些公共组件:例如项目初始的 header.vue、footer.vue 就是公共组件。
③:router:vue 路由的配置文件。
④:views:存放页面文件
⑤:app.vue:根组件
⑥:main.js 项目的入口文件,定义了 vue 实例,并引入根组件 app.vue,将其挂载到 index.html 中 id 为‘app’的节点上。
<template>
<div id="app"></div>
</template>
// 在这里写js逻辑相关的代码
<script>
export default {
name: "app"
};
</script>
// 这里写样式代码
<style scope></style>
<!-- scope的意思表示这段样式只在本xxx.vue文件中生效,其他xxx.vue文件中不会生效,有锁定的意思 -->
每一个vue文件都由 <template>、<script>、<style>三部分组成,分别对应 HTML、JavaScript、CSS。其中 <template>中写入HTML代码
注意的是 <template> 中只能有一个块标签(一般为 div )且其余标签都写在这个块标签内。
声明式渲染
差值表达式
我们通过 {{ }}
来表示差值表达式,通过这个方法来渲染网页内容。如我们将表达式写入 <template>,将变量名填充至大括号内
<template>
<h2>{{title}}</h2>
</template>
然后我们可以在script中定义变量
<script>
// export default是固定格式,不需要纠结
export default {
// 模块的名字
name: "app",
// 页面中数据存放的地方
data() {
return {
title: "Vue学习"
};
}
};
</script>
就可以返回内容。
差值表达式不仅可以渲染单个变量也可以渲染数组如:
<h2 class="title">{{title}}</h2>
<ul class="list">
<li>{{todoList[0]}}</li>
<li>{{todoList[1]}}</li>
<li>{{todoList[2]}}</li>
<li>{{todoList[3]}}</li>
<li>{{todoList[4]}}</li>
</ul>
<script>
export default {
name: "app",
data() {
return {
title: "今日待完成事项",
todoList: [
"完成HTML标签学习",
"完成CSS文字样式学习",
"完成CSS盒模型学习",
"完成Flex布局学习",
"完成JavaScript入门学习"
]
};
}
};
</script>
当然这里 li 标签的内容有些繁琐,可以使用 v-for 来简化
可以写如:
goodList: [
{
name: "华为",
model: "nova SE",
price: "2199"
},
{
name: "华为",
model: "Mate 20",
price: "3199"
},
{
name: "华为",
model: "畅想 10",
price: "1299"
}
]
再通过 {{goodList[0].name}}
来表示
处理用户输入
v-model(双向绑定)–input
双向绑定就是两个标签内容的数据绑定,如下面 input 的内容改变时,上面的内容也发生相应的改变。
<template>
<p class="page">{{message}}</p>
<input type="text" v-model="message" placeholder="请输入你想输入的内容" />
</template>
<script>
export default {
name: "app",
data() {
return {
message: ""
};
}
};
</script>
概括来说,input 通过 v-model 属性来形成一个模型(input内容即模型数据),而上面的 <p>则使用这个模型
多文本输入 <textarea> 也相同
通过这个方法,我们可以和复选框一起,实现下面的效果
即显示选择的内容,而返回内容为:
data() {
return {
checkedGoods: []
};
}
事件绑定 v-on
在平常的js中,对于如点击事件,我们需要添加监视器来监视事件,而在Vue中,我们一般使用事件绑定来完成。
如点击事件:
<button v-on:click="add">按钮</button>
即注册了一个点击事件,点击后驱动 add 方法。
其中v-on 可简写为 @ 即 @click=“add”
。
而方法(methods)的填写如下:
<script>
export default{
name:"app",
methods:{
add : function () {
方法主体
};
}
}
</script>
当你的方法需要接收参数的时候,你可以将参数写在这个括号内
<button @click="add(number)">点击</button>
相应的方法上也要做出改变
methods:{
add(number){
// 方法体
}
}
事件修饰符
阻止冒泡事件
<div @click.stop="fn2"></div>
捕获事件
<div class="div2" @click.capture="fn2"></div>
阻止默认事件
<div class="div2" @click.prevent="fn2"></div>
监听数值变化
在Vue中添加监视器来监视数值的变化:
watch:{}
如
watch: {
count() {
console.log("count发生了变化");
}
}
即没当数值变化则打印发生了变化,这里监视的变量与方法名相同,即 count(){}
就是监视count的方法。
当然,这个方法运行的前提是变量值必须发生变化。
进阶用法
获取旧值
在某些情况下,我们可能会需要上一次的数据,监视器可以给我们新值旧值两个变量。
watch:{
inputValue(value,oldValue) {
// 第一个参数为新值,第二个参数为旧值,不能调换顺序
console.log(`新值:${value}`);
console.log(`旧值:${oldValue}`);
}
}
方法里定义两个变量,前一个为新值,后一个为旧值。
实际上,之前使用的如 count(){}
来添加监视器的是简易方法,实际上监视器是一个对象里面包含 handler 方法和其他属性如:
watch: {
firstName: {
handler: function (newName, oldName) {
this.fullName = newName + " " + this.lastName;
},
immediate: true
}
}
immediate属性
在一般情况下,监视器内方法只有在变量发生变化时才会进行,实际上也不包括打开页面(第一次渲染)
但有时候我们就需要页面在打开是执行代码。可以添加immediate属性如之前代码