Vue的安装方式
官网地址：https://cn.vuejs.org/v2/guide/installation.html
开发工具： VScode
方式一：直接CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
方式二：下载和引入
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js
方式三：NPM安装
通过webpack 和 CLI 的使用，使用该方式
<body>
<div id="app">
{{name}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 声明式编程
// let(变量) / const(常量)
let app = new Vue({
el:"#app", // 用于挂载要管理的元素
data:{ // 定义数据
name:'hello vue'
}
})
</script>
</body>入门实例：计数器
<body>
<div id="app">
<h2>计算{{counter}}</h2>
<!-- v-on简写为 @click -->
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 声明式编程
// let(变量) / const(常量)
let app = new Vue({
el:"#app", // 用于挂载要管理的元素
data:{ // 定义数据
counter:0
},
methods:{ // 定义方法
add:function(){
this.counter++
},
sub:function(){
this.counter--
}
}
})
</script>
</body>