Vue.js的代码结构

a)         引入vue.js

b)         写视图层,我们要展示的内容

c)         实例化Vue()

  • data:存放数据
  • el:这个控制是哪块视图
  • methods:放我们的方法

示例

<!-- 视图层 -->
<div id="app">
    <!-- 插值表达式,可以读取我们的变量 -->
    {{ message }}
</div>

<!-- 1、引入vue的js,引入js之后他为我们提供了Vue类 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 调度层
    var vm = new Vue({
        // vue控制的区域
        el: '#app',
        // data参数存放我们的数据,这一层就是mvvm里的model层
        data: {
            message: 'Hello Vue!'
        },
        methods: {

        }
    })
</script>

 

上一篇:Vue实例: 点击循环列表里的某行,改变该行的样式。默认第一行


下一篇:uni-app路由