Vue框架

Vue框架官方
Vue的基本使用步骤
1.准备一个容器

<div id="app">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <!-- v-on:指令用于绑定事件 -->
        <button v-on:click="updateName">修改姓名</button>
        <button v-on:click="updateAge">修改年龄</button>
 </div>

v-on:click 绑定一个点击事件
Vue框架中用 v-on:指令用于绑定事件

2. 引入vue.js文件

 <script src="../js/vue.js"></script>

注： 关闭生产提示
(在开发版本中会有提示)

 Vue.config.productionTip = false

3.创建一个Vue实例
el ：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
template：模板
如果没有挂载的目标 el ， 会将模板作为挂载目标
周期函数中是，是先判断是否有模板，如果没有 在将html 节点元素作为挂载容器

 let vm = new Vue({
            //指定当前Vue对象操作的DOM容器
            el:'#app',
            //定义当前Vue对象管理的数据
            data:{
                name:'张三',
                age:20
            },
            //定义当前Vue对象管理的方法
            methods: {
                //修改姓名的方法
                updateName(){
                    this.name = '李四'
                },
                //修改年龄的方法
                updateAge(){
                    this.age = 30
                }
            },
        })