第一部分：模板语法

模板语法之一——插值表达式{{ }}

1.括号里面可以拼接：写三元表达式：可以算数运算

2.括号里面不可以写循环，声明变量，分支语句：

3.一句话：能console.log()的都能写在里面

<template>
  <!-- 这是vue的页面标签，能够在页面显示，
  template只能有一个亲儿子盒子:这里我弄一个div盒子 -->
  <div>
    <h2>插值表达式</h2>
    <!-- 插值表达式{{}} -->
    <!-- 写变量 -->
    <p>{{ num }}</p>
    <!-- 写三元表达式 -->
    <p>{{ num > 10 ? "大于10" : "小于1o" }}</p>
    <!-- 连接 -->
    <p>{{ num + "你好" }}</p>
  </div>
</template>

<script>
export default {
  // 我是js的逻辑
  data() {
    return {
      // 定义变量和数据
      num: 9,
    };
  },
};
</script>
<style>
</style>

模板语法之二——— v-html=" js数据变量 " 和v-text=" js数据变量 "

v-html把值当做html解析,v-html ===> innerHTML

v-text把值当成普通字符串显示, v-text ===> innerText

<template>
 <!-- 这是vue的页面标签，能够在页面显示，
 template只能有一个亲儿子盒子:这里我弄一个div盒子 -->
 <div>
   <!-- 语法 v-html="js数据变量" -->
   <!-- v-html把值当做html解析,v-html ===> innerHTML -->
   <span v-html="sum"></span>
   <!-- 语法 v-texe="js数据变量" -->
   <!-- v-text把值当成普通字符串显示, v-text  ===> innerText -->
   <span v-text="sum"></span>
  </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
   // 定义变量和数据
   sum: "<i>我是i标签</i>",
   };
  },
};
</script>
<style>
</style>

模板语法之三——v-bind

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）

例如：给img标签的src设置图片地址：

一般写法：<img v-bind:src="imgUrl" alt="" />

简写：<img :src="imgIng" alt="" />

<template>
 <div>
   <!-- v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）-->
   <img :src="imgIng" alt="" />
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    imgIng: "https://www.w3school.com.cn/ui2019/bg.png",
   };
 },
};
</script>
<style>
</style>

模板语法之四——v-for

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

目标结构可以是：数组 / 对象 / 数字

<template>
 <div>
  <!-- <标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签> -->
   <!-- 需求，把数组遍历到页面上 -->
   <div v-for="(value, index) in sum" v-bind:key="index">
    <!-- 遍历数组时和forEach里面的两个形参一样 -->
    {{ value.name }},{{ index }}
   </div>
  </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    sum: [
    { name: "张三", age: 18, sex: "男" },
    { name: "小花", age: 19, sex: "女" },
    ],
   };
 },
};
</script>
<style>
</style>

模板语法之五——v-show和v-if

语法：v-if="布尔值"

v-show 用的display:none隐藏 (频繁切换使用)

语法：v-show用css样式进行显示与隐藏

v-if 直接从DOM树上添加或移除

<template>
 <div>
  <!-- 需求：标签的显示与隐藏 -->
  <!-- 语法：v-if="布尔值" -->
  <!-- 含义：v-if在dom树中删除和添加元素 -->
  <p v-if="bool">我是v-if：只能在</p>
  <!-- 语法：v-show用css样式进行显示与隐藏 -->
  <!-- display:"none"-->
  <p v-show="bool">我是v-show</p>
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
  return {
    // 定义变量和数据
    // false/true
    bool: false,
   };
 },
};
</script>
<style>
</style>

模板语法之六——v-if/v-else-if/v-else

含义：和js里面的if-elseif一样：条件不合格则不在页面显示

<标签 v-if="条件">        </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else-if="条件">   </标签> 
<标签 v-else>             </标签>

<template>
 <div>
   <!-- 单词不要写错 -->
   <p v-if="num > 90">优秀</p>
   <p v-else-if="num > 60">及格</p>
   <p v-else>不及格</p>
 </div>
</template>

<script>
export default {
 // 我是js的逻辑
 data() {
   return {
     num: 70,
   };
  },
};
</script>
<style>
</style>

v-on和methods

作用：给标签绑定事件

<template>
  <div>
    <!-- v-on事件绑定 -->
    <!-- <标签 v-on:事件名="要执行的少量代码" > -->
    <button v-on:click="num = 2">第一个点击事件{{ num }}</button>
    <!-- <标签 v-on:事件名="methods中的函数" > -->
    <button v-on:click="btn2">第二个点击事件(普通)</button>
    <!-- <标签 v-on:事件名="methods中的函数(实参)"> -->
    <button v-on:click="btn3('传进去')">第三个点击事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    btn2: function () {
      console.log("第二个点击事件");
    },
    btn3(a) {
      console.log(a);
    },
  },
};
</script>
<style>
</style>

vue配置项-methods（this）

使用场景

与v-on配合使用
在methods内部访问数据。this.xxx
在methods内部调用其他的methods或调用data里面的变量

<template>
  <div>
   <!-- <标签 v-on:事件名="methods中的函数" > -->
   <button v-on:click="btn2">第二个点击事件(普通)</button>
 </div>
</template>

<script>
export default {
 data() {
   return {
     num: "可以被this调用",
   };
 },
 methods: {
   btn2: function () {
     console.log("第二个点击事件", this.num);
   },
   btn3(a) {
     console.log(a);
   },
 },
};
</script>
<style>
</style>

vue指令-v-on事件对象

语法

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <!-- 无传参状态下：通过形参直接接收 -->
    <a v-on:click="one" href="http://www.baidu.com">点我跳转百度未传参状态</a>
    <br />
    <!--传参状态下：通过$event指代事件对象传给事件处理函数 -->
    <a v-on:click="two(1, $event)" href="http://www.baidu.com"
      >点我跳转百度传参状态</a
    >
  </div>
</template>

<script>
export default {
  methods: {
    one(e) {
      e.preventDefault();
      console.log("没有跳转");
    },

    two(num, e) {
      e.preventDefault();
      console.log("没有跳转");
    },
  },
};
</script>
<style>
</style>

vue指令-v-on修饰符

一.事件修饰符

语法:

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡

<button v-on:click.stop="one">阻止事件冒泡</button>

.prevent - 阻止默认行为

<a @click.prevent="a" href="http://www.baidu.com">登录百度</a>

.once - 程序运行期间, 只触发一次事件处理函数

<button @click.once="btn">只触发一次事件处理函数</button>

二.键盘修饰符

监听回车事件

 <input @keyup.enter="btn1" type="text" />

第二部分：表单事件模块

vue指令-v-model双向绑定（表单绑定）

语法: v-model="data数据变量"

注意点：v-model不能和value同时使用

<!-- 语法：v-model="data数据变量" -->
<input placeholder="请输入内容" type="text" v-model="name" @input="input(10, $event)"/>
<!-- 双向数据绑定：数据变化->视图自动同步，视图变化->数据自动同步 -->
<p>我是usename{{ usename }}</p>