+ vue vue data template syntax options

vue option data:

data  computed  methods

 

New directory demo2 in src-pages, the new catalog index.vue

<template>
    <div>选项数据<div>
    <div>---------------------------------</div>
</template>

<script>
    export default{
        data(){
            
        }
    }
</script>

Add routes in the router-index.js

 

 然后代码报错了 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

 

 

Meaning that there can be only one template in the main div (root object), if there are multiple elements, please include them with one main div

That's all changed

 

 

define a global variable data is

 

 

 

 

the object is computed, which can define various functions

 

 

 

 

methods is an object, which can define various functions

There is generally a function to the event to use the

 

 

 

 

 

vue template syntax:

Templates can be directly embedded js syntax

 

 

 

 

instruction:

V-html content bound to become a child element of the current element

v-bind properties dynamic

v-on binding event (short for direct use @ instead of)

 

v-html 

 

 

 

v-bind

 

 

 

 v-on

 

 

 

 

filter

Write filter function filters in a subject