1.vue常用术语 2. 样式与事件绑定 3. 列表渲染,并理解diff算法:key

发布于：2022-04-16 14:19:12  栏目：技术文档

1.vue常用术语

挂载点：当前vue的实例范围

 <div class="app">
      <p>用户名：{{username}}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            username: "Hello world",
          };
        },
      }).mount(".app");
    </script>

vue实例：

  const app = Vue.createApp({
        data() {
          return {
            username: "Hello world",
          };
        },
      }).mount(".app");

数据注入：原理就是使用访问器属性

//直接获取到值
console.log(app.username);

响应式：外部修改映射到vue实例中的数据，实时更新

//直接更新数据
app.username = '自定义修改值'；

2. 样式与事件绑定

1.属性绑定：v-bind可以用":"简写 ，v-bind可以添加任意属性。添加样式可以写成v-bind:style="变量名"。
2.事件绑定：v-on 可以用"@"简写v-on添加事件。如添加点击事件可以写成v-on：click=""。event:用@event
3.数据双向绑定：v-model.例如：  <input type="text" v-model="commot" :value="commot" />

3. 列表渲染,并理解diff算法:key

列表渲染

//数组和对象使用方法一样
<div class="app">
      <ul>
        <li v-for="city of citys">{{city}}</li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            citys: ["合肥", "北京", "哈尔滨"],
          };
        },
      }).mount(".app");
    </script>

diff算法：保证key的唯一性:key必须添加

 <div class="app">
      <ul>
        <li v-for="(city,index) of citys" :key="index">{{index}}=>{{city}}</li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            username: "Hello world",
            citys: ["合肥", "北京", "哈尔滨"],
          };
        },
      }).mount(".app");
    </script>

相关推荐