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属性如之前代码