vue学习1 常用语法 

<!DOCTYPE html>
<html>
  <head>

  </head>

  <body>

    <div id="app">
      <!-- 在页面上展示我们定义的变量 -->
      {{ msg }}
      <p>{{ name  }}</p>
      <span>{{ age }}</span>
      <!-- 循环某某一个数组，这个v-for 可以添加在任意一个 html标签 -->
      <p v-for="name in array">{{ name }}</p>
      
      <div v-for="name in array">
        <span>{{ name }}</span>
      </div>
      <!-- v-bind 用来向原生属性传递值，让属性使用vue声明的所有变量  -->
      <select>
        <option v-for="name in array" v-bind:value="name">{{name}}</option>
      </select>
      <!-- v-bind  可以直接用 冒号来简写 -->
      <select>
        <option v-for="name in array" :value="name">{{name}}</option>
      </select>
      
      <div>
        <p v-show="eq">你能看见我吗</p>
        <input type="button" value="点击"  @click="eq=!eq" >
      </div>
      <div>
          <input type="button" value="点击al"  @click="al" >
      </div>
      <div>
        <!-- v-model 双向绑定 -->
        <input type="text" v-model="textval">
        <p v-once>固定值：{{ textval }}</p>
        <p>动态值：{{ textval }}</p>
      </div>

      <div>
          <p>{{ innerHTML }}</p>
          <p v-html="innerHTML"></p>
        </div>
        <a :href="url">{{url}}</a>
        <!-- 计算属性 -->
        <div>
          <span>当用户输入内容的时候，展示出用户输入内容的长度</span>
          <input type="text" v-model="input_text"> 
          <span>{{size}}</span>
        </div>
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app = new Vue({
      el:"#app",
      data() {
        return {
          msg: "hello wrold!!",
          name: "andashu",
          age: 14,
          eq: true,
          input_text:  "",
          // size: 0,
          url: "http://www.besttest.cn",
          array: ["xiaozhang","xiaowang","xiaoliu","xiaoli"],
          textval: "andashu",
          innerHTML: "<span style='color:red'> 这里是innerHtml</span>"
        }
      },
      computed:{
        size: function() {
        return this.input_text.length
      }
      },
      methods: {
        al(){
          // this 代表了vue模块，在方法里头如果要用全局的变量，必须得有this，
          var msg = "hello methods!!"
          console.log(this.msg)
          console.log(msg)
        }
      }
    })
    
    </script>
  </body>
</html>
posted @ 2021-04-14 09:29  Mia妈妈加油呀  阅读(53)  评论(0)    收藏  举报