vue-02-安装-指令

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后可以用 淘宝的npm镜像安装
cnpm install vue-cli -g

vue init webpack lisa-yoga-baby

cd lisa-yoga-baby

npm install

npm run dev

npm run build

{{ hello }}
通过下面的 script进行返回
<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘Hello Vue‘
      }
    }
  }
</script>

{{ 1 + 1 }}
{{ 0 < 10 ? "true" : "false" }}

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘Hello Vue‘
      }
    }
  }
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

<p v-text="msg">text</p>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘
      }
    }
  }
</script>

<div v-html="msg"></div>

<span v-bind:class="bind_ha">hahaha a</span>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111"
      }
    }
  }
</script>

    <!--v-if 属性-->
    <div>
      <p v-if="show">if can see</p>
      <p v-else-if="show"> else if can see </p>
      <p v-else="!show">else can see </p>
    </div>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111",
        show: false
      }
    }
  }
</script>

<div>
      <p v-show="show"> show can see </p>
    </div>

<!--v-for-->
    <div>
      <ul>
        <li v-for="(name, index) in names" v-bind:index="index">{{ name.name }} : {{ name.age }}</li>
      </ul>
    </div>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111",
        show: false,
        names: [{name: ‘vini‘, age: 24}, {name: ‘wenbronk‘, age: ‘26‘}, {name: ‘lisa‘, age: ‘25‘}]
      }
    }
  }
</script>

<div>
      <button v-on:click="num += 1"> 按钮</button>
      <p> {{ num }}</p>
    </div>

<script> 
num: 1, </>

    <!--methods -->
    <div>
      <button v-on:click="handlerClick"> methods 按钮 </button>
    </div>

<script>
  export default {
    name: ‘hello‘,
    data() {
      return {
        names: [{name: ‘vini‘, age: 24}, {name: ‘wenbronk‘, age: ‘26‘}, {name: ‘lisa‘, age: ‘25‘}],
        num: 1,
      }
    },

　　handlerClick() {
  　　　　alert("事件1 ")
  　　　　// 去上面data的值, this索引当前data中的数据
  　　　　this.show = !this.show
　　}

 } </script>

<li v-on:click.once="getItemInfo(index, $event)" v-for="(name, index) in names">{{ name }}</li>

<div>
  <input type="text" v-on:keyup="getKeyInfo"/>
  <!--只有enter才会监听-->
  <input type="text" v-on:keyup.enter="getKeyInfo"/>
</div>

 methods: {
      getItemInfo(index, event) {
          console.log(this.names[index]);
         console.log(event);
      },
      getKeyInfo(event) {
        console.log(event.keyCode)
        console.log(event.key)
      }
    }

<input type="text" v-on:keyup.enter="getKeyInfo"/>

 <div>
      <button v-on:click="pushArr">pushArr</button>
    </div>

pushArr() {
        this.names.push("wenbronk")
      }

computed: {
       msgRe() {
         return this.message.split(‘‘).reverse().join(‘‘);
       }
    }

<!--观察这-->
    <div>
      <p> {{ msgRe}}</p>
    </div>

<!--表单数据绑定， 数据立马显示在下面-->
    <div>
      <input type="text" v-model="msg"/>
      <p> {{ msg }}</p>
    </div>

export default {
    name: "a03_computed",
    data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

   data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

    methods: {},

    computed: {
      msgRe() {
        return this.message.split(‘‘).reverse().join(‘‘);
        // return this.message.split(‘‘).reverse().concat(‘‘);
      }
    },
    watch: {
      msg: function (data) {
        console.log(data + "   data 就是你输入的额信息")
      }
    }