目录

1 使用data函数提供数据

2 在html中绑定元素的属性

3 展示列表内容  v-for 指令

 4  v-if v-else-if  v-else  v- show 

5 事件与响应性

 6 使用 computed 计算属性处理稍复杂的业务逻辑

7 使用 methods 方法处理事件

8 使用 watch 监听数据的变化

 9 计算属性comuputed 和方法 methods 的区别

10 计算属性 和 Watch 监听器的区别

11 方法和 Watch 监听器的区别

12 表单输入数据处理 

13 双向绑定入门和 v-model

 14 其它表单控件事件处理

15 表单提交事件处理

16 在 inline-style 内联样式中绑定 data 数据

17 根据条件添加或删除 class 样式

1 使用data函数提供数据

html:

   <dev id="app">
        <h1>
           你好!{{name}}
        </h1> 
   </dev>

js:

const app = Vue.createApp({
  data() {
    return {
      name: "眀昊", 
      
    };
  },
});
app.mount("#app");

2 在html中绑定元素的属性

v-bind 指令

 hrml:

   <a v-bind:href="link">链接</a>
   <!-- 简写 -->
   <a :href="link">链接</a>

js:

const app = Vue.createApp({
  data() {
    return {
      link: "https://www.baidu.com/",
    };
  },
});
app.mount("#app");

3 展示列表内容  v-for 指令

html

        <!-- 1 普通遍历 -->
        <li v-for="todo in todos">{{ todo }}</li> -->
           <!-- 2 带序号遍历 -->
        <li v-for="(todo, index) in todos">{{index + 1}}. {{ todo }}</li>

         <!-- 3 带checkbox 勾选 -->
        <li v-for="todo in todos">
          <input type="checkbox" :checked="todo.complete" />{{todo.content}}
        </li>

js 

// 1   2 
const app = Vue.createApp({
  data() {
    return {
      todos: ["把项目做完", "去超市购物", "看10分钟的书"],
    };
  },
});
app.mount("#app");


// 3 

const app = Vue.createApp({
  data() {
    return {
      // todos: ["把项目做完", "去超市购物", "看10分钟的书"],
      todos: [
        {
          content: "把项目做完",
          complete: true,
        },
        {
          content: "去超市购物",
          complete: false,
        },
        {
          content: "看10分钟的书",
          complete: false,
        },
      ],
    };
  },
});
app.mount("#app")

 4  v-if v-else-if  v-else  v- show 

与js 中的使用放法相同 ,但是必须相邻

v-show会设置display 属性隐藏元素

html:

    
      <p v-if="books.length === 0">目前没有任何书籍</p>
      <h2 v-else-if="books.length === 1">{{ books[0] }}</h2>
      <ul v-else>
        <li v-for="book in books">{{ book }}</li>
      </ul>
      <p v-show="books.length === 0">目前没有任何书籍</p>
      <ul v-show="books.length > 0">
        <li v-for="book in books">{{ book }}</li>
      </ul>

js:

const app = Vue.createApp({
  data() {
    return {
      books: ["JavaScript 基础语法详解", "Vue 入门实战", "React 入门到精通"],
      // books: [],
      // books: ["JavaScript 基础语法详解"],
    };
  },
});
app.mount("#app");

5 事件与响应性

 html:

<button @click="showAnswer = !showAnswer">
          {{ showAnswer ? "隐藏" : "显示" }}答案
</button>

 <!-- 或 -->

<button v-on:click="showAnswer = !showAnswer">
          {{ showAnswer ? "隐藏" : "显示" }}答案
</button>
 <!-- 或 -->

js:

// 示例：事件处理和响应性入门
const app = Vue.createApp({
  data() {
    return {
      showAnswer: false,
    };
  },
});
app.mount("#app");

点击显示答案:

html:

    <div id="app">
      <div class="question">
        <p>问：Vue 是一个什么样的框架？</p>
        <p v-show="showAnswer" class="answer">
          答：Vue 是一套用于构建用户界面的渐进式框架。
        </p>
        <button @click="showAnswer = !showAnswer">
          {{ showAnswer ? "隐藏" : "显示" }}答案
        </button>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      showAnswer: false,
    };
  },
});
app.mount("#app");

 6 使用 computed 计算属性处理稍复杂的业务逻辑

• 使用computed 配置项定义计算属性
• 每个计算属性都是一个函数
• 函数里可以使用this访问data或其他配置项中的值
• 在模板中可以像data属性一样使用
• computed 写在Vueapp 中的一个对象

html:

  <div id="app">
      <div class="question">
        <p>问：Vue 是一个什么样的框架？</p>
        <p v-show="showAnswer" class="answer">
          答：Vue 是一套用于构建用户界面的渐进式框架。
        </p>
        <button @click="showAnswer = !showAnswer">{{ label }}</button>
      </div>
    </div>

        js:

// 示例：使用 computed 处理稍复杂的业务逻辑
const app = Vue.createApp({
  data() {   // 函数 
    return {
      showAnswer: false,
    };
  },
  computed: {   //这是一个对象

    label() {
      return this.showAnswer ? "隐藏答案" : "显示答案";
    },
  },
});
app.mount("#app");

7 使用 methods 方法处理事件

上面的例子吧逻辑放在了html中 @click="showAnswer = !showAnswer"里 这样不利于解耦 和一旦逻辑复杂后 就无法实现 

methods 是VueApp 中的对象  其中写逻辑处理函数 可以与html 事件绑定

html:

        <button @click="toggleAnswer">{{ label }}</button>
 

js:

// 示例：使用 methods 处理事件
const app = Vue.createApp({
  data() {
    return {
      showAnswer: false,
    };
  },
  computed: {
    label() {
      return this.showAnswer ? "隐藏答案" : "显示答案";
    },
  },
  methods: {
    toggleAnswer() {
      this.showAnswer = !this.showAnswer;
    },
  },
});
app.mount("#app");

8 使用 watch 监听数据的变化

• 使用watch定义监听器。
• 监听器名字要和监听的属性名保持一致。
• 监听器接收属性旧值和属性新值作为参数
• 监听器无返回值

Html:

  <button @click="toggleAnswer">{{ label }}</button>

js:

// 示例：使用 watch 监听数据变化
const app = Vue.createApp({
  data() {
    return {
      showAnswer: false,
      countDown: 5,
      timer: null,
    };
  },
  computed: {
    label() {
      return this.showAnswer ? "隐藏答案 " + this.countDown : "显示答案";
    },
  },
  methods: {
    toggleAnswer() {
      this.showAnswer = !this.showAnswer;
    },
  },
  watch: {   //添加一个计时器。监听showAnswer的值 如果发生变化
    showAnswer(newVal, oldVal) {
      if (newVal) {
        this.countDown = 5;
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
        // 5秒后关闭答案
        this.timer = setInterval(() => {
          this.countDown -= 1;
          if (this.countDown === 0) {
            this.showAnswer = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
  },
});
app.mount("#app");

 9 计算属性comuputed 和方法 methods 的区别

• methods方法和computed计算属性，两种方式的最终结果确实是完全相同
• 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，才会重新求值，
• methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
• 使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。
• 对于任何复杂逻辑，你都应当使用计算属性
• methods方法可以传递参数

10 计算属性 和 Watch 监听器的区别

Computed 适合页面交互 简单的业务逻辑  

Watch 适合耗时的操作,加载远程API 等 直接修改data数据

11 方法和 Watch 监听器的区别

12 表单输入数据处理 

html:

<div id="app">
      <!-- @submit.prevent -->
      <div>
        <div class="input-field">
          <label for="username">用户名：</label>
          <input id="username" type="text" @input="handleInput" />
        </div>
        <div class="result">
          <p>你输入的用户名是：{{ username }}</p>
        </div>
      </div>
    </div>

js :

// 示例：表单输入控件事件处理
const app = Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  methods: {
    handleInput(e) {
      this.username = e.target.value;
    },
  },
});
app.mount("#app");

13 双向绑定入门和 v-model

双向绑定: 输入框的值和data等属性的值互相同步。

v-mode简化了@input和:value数据同步。

一般写法：

html:

<div id="app">
      <div>
        <div class="input-field">
          <label for="username">用户名：</label>
          <input
            id="username"
            type="text"
            @input="handleInput"
            :value="username"
          />
          <button @click="resetUsername">重置</button>
        </div>
        <div class="result">
          <p>你输入的用户名是：{{ username }}</p>
        </div>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  methods: {
    handleInput(e) {
      this.username = e.target.value;
    },
    resetUsername() {
      this.username = "";
    },
  },
});
app.mount("#app");

v-model 写法：

html：

 <div id="app">
      <div>
        <div class="input-field">
          <label for="username">用户名：</label>
          <input id="username" type="text" v-model="username" />
          <button @click="resetUsername">重置</button>
        </div>
        <div class="result">
          <p>你输入的用户名是：{{ username }}</p>
        </div>
      </div>
    </div>

js:

const app = Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  methods: {
    // handleInput(e) {
    //   this.username = e.target.value;
    // },
    resetUsername() {
      this.username = "";
    },
  },
});
app.mount("#app");

 14 其它表单控件事件处理

 <div id="app">
      <div class="form">
        <label for="username">用户名：</label>
        <input id="username" type="text" v-model="username" />
        <label for="gender">性别：</label>
        <div id="gender" class="radio-group">
          <input
            name="gender"
            type="radio"
            value="male"
            v-model="gender"
          /><span>男</span>
          <input
            name="gender"
            type="radio"
            value="female"
            v-model="gender"
          /><span>女</span>
        </div>
        <label for="interest">兴趣：</label>
        <div id="interest" class="checkbox-group">
          <input
            type="checkbox"
            name="interests"
            value="frontend"
            v-model="interests"
          /><span>前端</span>
          <input
            type="checkbox"
            name="interests"
            value="backend"
            v-model="interests"
          /><span>后端</span>
          <input
            type="checkbox"
            name="interests"
            value="fullstack"
            v-model="interests"
          /><span>全栈</span>
        </div>
        <label for="occupation">职业：</label>
        <select
          name="occupation"
          id="occupation"
          v-model="occupation"
        >
          <option value="frontend">前端工程师</option>
          <option value="backend">后端工程师</option>
          <option value="fullstack">全栈工程师</option>
        </select>
        <label for="intro">自我介绍：</label>
        <textarea id="intro" rows="10" v-model="intro"></textarea>
      </div>
      <div class="result">
        <ul>
          <li>用户名： {{ username }}</li>
          <li>性别：{{ gender }}</li>
          <li>兴趣：{{ interests }}</li>
          <li>职业：{{ occupation }}</li>
          <li>自我介绍： {{ intro }}</li>
        </ul>
      </div>
    </div>

js:

// 示例：其它表单控件处理
const app = Vue.createApp({
  data() {
    return {
      username: "",
      gender: "",
      interests: [],
      occupation: "",
      intro: "",
    };
  },
});
app.mount("#app");

15 表单提交事件处理

@submit.prevent 

prevent 修饰符 阻止标签默认行为  = js中的preventDefault

html:

    <div id="app">
      <form @submit.prevent="handleSubmit">
        <label for="username">用户名：</label>
        <input id="username" type="text" v-model="username" />
        <label for="gender">性别：</label>
        <div id="gender" class="radio-group">
          <input
            name="gender"
            type="radio"
            value="male"
            v-model="gender"
          /><span>男</span>
          <input
            name="gender"
            type="radio"
            value="female"
            v-model="gender"
          /><span>女</span>
        </div>
        <label for="interest">兴趣：</label>
        <div id="interest" class="checkbox-group">
          <input
            type="checkbox"
            name="interests"
            value="frontend"
            v-model="interests"
          /><span>前端</span>
          <input
            type="checkbox"
            name="interests"
            value="backend"
            v-model="interests"
          /><span>后端</span>
          <input
            type="checkbox"
            name="interests"
            value="fullstack"
            v-model="interests"
          /><span>全栈</span>
        </div>
        <label for="occupation">职业：</label>
        <select
          name="occupation"
          id="occupation"
          v-model="occupation"
        >
          <option value="frontend">前端工程师</option>
          <option value="backend">后端工程师</option>
          <option value="fullstack">全栈工程师</option>
        </select>
        <label for="intro">自我介绍：</label>
        <textarea id="intro" rows="10" v-model="intro"></textarea>
        <button type="submit">提交</button>
      </form>
      <div class="result">
        <ul>
          <li>用户名： {{ username }}</li>
          <li>性别：{{ gender }}</li>
          <li>兴趣：{{ interests }}</li>
          <li>职业：{{ occupation }}</li>
          <li>自我介绍： {{ intro }}</li>
        </ul>
      </div>
    </div>

js:

// 示例：表单事件处理
const app = Vue.createApp({
  data() {
    return {
      username: "",
      gender: "",
      interests: [],
      occupation: "",
      intro: "",
    };
  },
  methods: {
    handleSubmit(e) {
      // e.preventDefault();  // 设置了修饰符就不需要了
      console.log(
        this.username,
        this.gender,
        this.interests,
        this.occupation,
        this.intro
      );
    },
  },
});
app.mount("#app");

16 在 inline-style 内联样式中绑定 data 数据

vue 修改html元素样式 

•  直接使用v-bind 绑定。
• 也可以绑定计算属性、方法等

html:

 <div id="app">
      <div>
        <p :style="pStyle">这是一个段落</p>
        <button class="btn" @click="fontSize += 1">A</button>
        <button class="btn" @click="fontSize -= 1">a</button>
      </div>
    </div>

 js:

const app = Vue.createApp({
  data() {
    return {
      fontSize: 16,
    };
  },
  computed: {
    pStyle() {
      return {
        color: "white",
        fontSize: this.fontSize + "px",
      };
    },
  },
});
app.mount("#app");

17 根据条件添加或删除 class 样式

• 直接使用v-bind绑定
• 可以绑定单个class
• 可以用数组绑定多个class
• 可以用对象，根据条件添加/移除class

html:

  <div id="app">
      <p :class="[textClass, stateClass, { hide: isHidden }]">
        这是一个段落
      </p>
      <button @click="isHidden = !isHidden">切换状态</button>
    </div>

 js:

const app = Vue.createApp({
  data() {
    return {
      textClass: "text-blue",
      stateClass: "danger",
      isHidden: false,
    };
  },
});
app.mount("#app");