1.Vue初次使用

1.Vue.js安装

方式一：通过CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src=“https://cdn.jsdelivr.net/npm/vue”>

方式二：下载引入

开发环境：https://vuejs.org/js/vue.js
生成环境：https://vuejs/org/js/vue.min.js

方式三：NPM安装(后续介绍）

2.使用vue.js

<div id="app">
    {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    //let( / const
    let app = new Vue({
            el: '#app',//用于挂载要管理的元素
            data: {//定义数据
            message:'你好啊，李河！'
            }});
</script>

代码解析

• 创建vue对象的时候，传入一些options:{}
  • {}中包含了el属性：该属性决定了这个vue对象挂载到哪一个元素上。我们这里挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据
    • 这些数据可以使我们直接定义出来的，比如像上面这样
    • 也可能是来自网络，从服务器加载的。
• 浏览器执行代码流程：
  • 先执行代码显示出对应的HTML
  • 执行到创建Vue实例，并且对原HTML进行解析和修改
• 并且代码可以做到响应式的。

3.案例：计数器

<div id="app">
    <h2>当前计数为:{{counter}}</h2>
    <!--   <button v-on:click="counter++">+</button>
       <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log("add方法执行了.")
                this.counter++;
            },
            sub: function () {
                console.log("sub方法执行了.")
                this.counter--;
            }
        }
    })

代码解析

• methods属性，该属性用于Vue对象中定义方法，如案例中点击事件就会执行此属性中的函数
• v-on:click指令：该指令用于监听某个元素的点击事件，并且需要制定当发生点击时，执行的方法（方法通常是methods定义的方法）
• @click是v-on:click的语法糖形式（简写）
  
  
  
  
  Vue基本使用学习结束