vue的基础语法操作

Vue文档：https://cn.vuejs.org/v2/guide/

<template>
    <div>
        

        <input type="text" v-model="message">

        {{ message }} 
          <!-- 输出 -->
        <!--{{* message }}   组织双向绑定-->

        {{ message + '好不好'}} 

        {{ message.split("").reverse().join("") }}
        <!-- 反转字符串 -->

        <br><br>
        <!-- {{ message | reverse }} -->
        <br><br>


        
        <div v-show="flag">
            你能看见我吗
        </div>

        <!-- 使用v-show显示或者隐藏字符串 -->

        <div v-if="flag">

            你能看见我吗
        </div>
        <!-- 使用v-if显示或者隐藏字符串 -->


        <div v-if="num==10">
            num = {{ num }}
        </div>

        <div v-else-if="num==9">
            num = 9
        </div>


        <div v-else>
            num != 10 
        </div>

        <!-- vue逻辑判断 -->

        <br><br>

        <ul>

            <li v-for='item in tlist'>

                {{ item.text }}

            </li>

        </ul>
        <!-- vue的循环语句 -->


        <br><br>

        反转前：{{ message }}

        <br><br>

        反转后：{{ reverse_message }}




        <table>
            <tr v-for="item,index in datalist">
                <td>{{ item.name }}</td>
                <td>
                    <button @click="minux(index)">-</button>
                    <input type="text" v-model="item.num">
                    <button @click="add(index)">+</button>
                </td>
            </tr>


        </table>

        
      
    </div>
  </template>
   

  <script>
  export default {
    data () {
      return {

        message:'hello world!',
        tlist:[{text:'汽车'},{text:'面包'},{text:'牛奶'}],
        flag:true,
        //   true , 1 是一样的
        //  false  ,0 是不显示
        num:9,
        datalist:[{name:'汽车',num:0},{name:'电脑',num:0},{name:'牛奶',num:0}],

      
      }
    },
    //监听属性

    computed:{
        reverse_message:function(){
            return this.message.split("").reverse().join("")
        }
    },
    //绑定事件

    methods:{
        add:function(index){
            this.datalist[index].num++;
        },
        minux:function(index){
            if(this.datalist[index].num > 1){
            this.datalist[index].num--;
            }
        }
    }
  }
  </script>
   
  <style>
  </style>

路由配置

import test from './components/test'

, {
  path: '/test',
  component: test
}

注意：使用vue时有个原则，就是需要使用

套起来，不然会发生一些不可描述的错误！

<template>
    <div>
      
      <h1>头部</h1>

    </div>
  </template>
   
  <script>
  export default {
    data () {
      return {
      
      }
    }
  }
  </script>
   
  <style>
  </style>