Vue基础①
Vue基础①
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属性如之前代码