Vue3.x 快速入门基础

应用实例

每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的：

const app = Vue.createApp({
  /* 选项 */
})

一个Vue应用需要被挂载到一个 DOM 元素中,对DOM进行渲染

const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

property

data()

data是一个函数，该函数需要返回一个对象，并储存在组件实例中。

<div id="student" >{{message}}</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: 'hhhh' }
    }
  });
const vm = app.mount('#student');
</script>

使用{{}}文本插值将会被替换为message中的，并且绑定的组件实例上message发生了改变，插值处的内容都会更新。

methods

我们可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

<div id="student">
  <div>name: {{name}}</div>
  <div>age: {{age}}</div>
  <div>{{hello()}}</div>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {name: 'kiddy',
              age: 18 }
    },
    methods: {
      hello: function(){
        return  this.name + "：你好啊！";
      }
    }
  });

const vm = app.mount('#student');
</script>

vue实例中还有其他的property

模板语法

模板语法基础

• {{}}

前面提到 使用{{}}文本插值将会被替换为message中的，并且绑定的组件实例上message发生了改变，插值处的内容都会更新。

但{{}}只能接受文本参数，不能转义。就比如传递html，并不会将html进行转义。

• 可以使用v-html 传递html文本

<div id="student">
  <span v-html="message"></span>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: '<span>hhhh</span>' }
    }
  });
const vm = app.mount('#student');
</script>

• 可以使用v-bind 指令绑定html中的属性值

<div id="v2">
  <span v-bind:title="message">鼠标悬停</span>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {message: '你好啊'}
    }
  });

const vm = app.mount('#v2');
</script>

v-bind 可以缩写为 :

<div id="v2">
  <span :title="message">鼠标悬停</span>
</div>

• 可以使用v-on 指令监听DOM事件 (...)

<div id="v3">
  <button v-on:click="go">点击</button>
</div>

<script>
  const app = Vue.createApp({
      methods: {
        go: function (){
          alert(1);
        }
      }
  });

const vm = app.mount('#v3');
</script>

v-on可以缩写为@

<a @click="doSomething"> ... </a>

• 可以使用v-model指令实现数据的双向绑定。

<div id="v4">
  <p>{{message}}</p>
  <input v-model="message">
</div>
<script>
  const app = Vue.createApp({
      data(){
        return {
          message: 'Kiddy'
        }
      }
  });

const vm = app.mount('#v4');

</script>

条件循环渲染

条件

v-if: 对应java if

v-else-if：对应java else if

v-else: 对应java else

如果放回true则渲染，否则不渲染

<div id="v5">
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else>C</div>
</div>

<script>
    const app = Vue.createApp({
         data(){
           return {type:'B'}
         }
    })
    const vm = app.mount('#v5');
</script>

循环

v-for 指令来实现循环
语法 : v-for="obj in objs"

<table id="v6">
  <thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="student in students">
    <td >{{student.name}}</td>
    <td>{{student.age}}</td>
    <td>{{student.gender}}</td>
  </tr>
  </tbody>
</table>

<script>
    const app = Vue.createApp({
         data(){
           return {  students: [
               {
                 name: 'AAA',
                 age: 1,
                 gender: '男'
               },
               {
                 name: 'BBB',
                 age: 2,
                 gender: '男'
               },
               {
                 name: 'CCC',
                 age: 1,
                 gender: '女'
               }
             ]}
         }
    })
    const vm = app.mount('#v6');
</script>

使用v-for直接遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<script>
    const app = Vue.createApp({
         data(){
           return {
             object: {
               title: 'asddada',
               author: 'kiddy',
               publishedAt: '2021-11-14'
             }}
         }
    })
    const vm = app.mount('#v-for-object');
</script>

v-if 与 v-for 一起使用 （不推荐使用）

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码表示将只渲染未完成的 todo。