体验Vue.js

一、Vue.js的安装

Vue.js的安装方式
1.直接csdn引入：

对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

2.下载和引入

开发版本：Vue.js(开发版本：包含完整的警告和调试模式)
生产版本：Vue.js(生产版本：删除了警告，33.30KB min+gzip)

3.NPM安装

# 最新稳定版
$ npm install vue

二、体验Vue.js

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


<script>
    // let(变量)/const(常量)
    const app = new Vue({
        el:'#app', //挂载元素
        data:{  //定义变量
            message:'Hellow Vue',
            name:'Vue'
        }
    })
</script>

三、Vue的列表展示（v-for）

<div id="app">
    <h2>电影列表</h2>
    <ul>
        <li v-for="item in move">{{item}}</li>
    </ul>
    <h2>item 是自己定义的名称</h2>
    <ul>
        <li v-for="dy in move">{{dy}}</li>
    </ul>
</div>

<script>
    // let(变量)/const(常量)
    const app = new Vue({
        el:'#app',
        data:{
            move:['速度与激情','鬼吹灯','死神来了']
        }
    })
</script>

四、计数器（小案例）

<div id="app">
   <h2>小案例————计数器</h2>
    <h2>{{number}}</h2>
    <button v-on:click="jia">+</button>
    <button @click="jian">-</button>
</div>
<!--v-on:click 的语法糖 @click-->
<script>
    // let(变量)/const(常量)
    const app = new Vue({
        el:'#app',
        data:{
            number:0
        },
        methods:{
            jia(){
                this.number++
            },
            jian(){
                this.number--
            }
        }
    })
</script>