<一>vue 基础定义

1、vscode 安装 open in browser 插件

 

安装完成后在html页面上点击右键就可以选择浏览器打开了。

 2、看一个简单例子

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>

    <body>
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
    </script>
</html>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

什么意思呢，就是vue自动将数据和 DOM 建立了关联，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。

3、定义参数 在一个vue中的data中定义参数集合。支持json 格式

 var app = new Vue({
                  el: '#app',      //dom的唯一标志
                  data: {          //参数集合
                    message: 'Hello Vue!'
                  }
                })

4、定义方法 在一个vue中的methods 中定义方法

  var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  },
                  methods: {    //定义方法
                    myFun: function () {
                        alert('Hello Vue!')
                    }
                  }
                })

5、vue 提供了一些生命周期钩子函数

var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  },
                  beforeCreate: function(){     //创建前执行
                    console.log('beforeCreate')
                  },
                  created: function(){          //创建后执行
                    console.log('created')
                  },

所有的函数可以点击图片查看 钩子函数图片 

以上就是基础的一些定义了。

 

posted @ 2021-12-11 18:45  许轩霖  阅读(183)  评论(0)    收藏  举报