Vue01

Vue.js下载

下载官网：https://vuejs.org/js/vue.js

用于学习开发的下载网站

下载官网：https://vuejs.org/js/vue.min.js

生产环境

扩展下载方法：

NPM下载Vue.js

Vue.js初识

<div id = "app">{{message}}</div>

<script src = "../js/vue.js"></script>
<script>
    //let(变量)/const(常量)
    //声明式编程
    const app = new Vue({
        el:"#app",//用于挂载要管理的元素，id属性一样
        data:{
            message:"你好a,李白"
        }
    })
</script>

列表展示：

  <div id = "app">
    <ul>
      <li v-for = "item in movies">{{item}}</li>
    </ul>
  </div>
<script src = "../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"nihaoa",
        movies:["海贼王","大话西游","葫芦娃","黑马"]
      }
    })
  </script>

里面的vfor是vue里面的遍历元件{{}}是一个表达式

vue计数器：

<div id ="app">
  <h2>当前的计数是：{{counter}}</h2>
  <button v-on:click="add">+</button>
  <button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el:"#app",
      data:{
        counter:0
      },
      methods:{
        add:function (){
          this.counter++;
        },
        sub:function (){
          this.counter--;
        }
      }
    })
</script>

v-on表示vue里面挂载的专属行为，data:中的counter看作变量名，不要加双引号

this表示当前的对象，也就是app.总结可以看出，这data就是Vue对象里面的属性参数，而methods可以认为就是对象方法