vue学习基本简介,安装,示例,options

Vue是国内大神开发的前端框架,为了解决减少开发中DOM操作,提交渲染效率,所以通过api操作,不需要操作DOM,so提高了我们开发的效率,更多时间关注业务逻辑...

后端主要是由MVC,而前端是MVVM ,M:保存页面的单独数据 V:每个页面的HTML VM:调度数据,也就是M和V的桥梁

安装

https://cn.vuejs.org/v2/guide/installation.html

方式一:CDN引入,直接请求别人服务器的js文件

方式二:直接下载js包安装,

方式三:npm安装

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld</title>
</head>
<div></div>
<body>
    <!-- 当有id进行管理 -->
    <div id="app">{{message}}</div>
    <!-- 没有通过实例id进行管理 -->
    <!-- <div>{{message}}</div> -->
    <!-- 引入vuejs文件 -->
    <script src="../vue.js"></script>     
    <script>
        const app = new Vue({
             // el这个实例负责管理，用于挂载元素
            el:'#app',
            //data这个实例用于定义数据
            data:{
                message:'helloworld'
            },
            methods:{
                changedata:function(){
                    this.message += '数据变了' 
                }
            }
        })
        //这里调用app实例的changedata成功修改数据
       app.changedata()
    </script>
</body>
</html>

options

　　上面我看到el,data,methods这都是创建Vue实例的时候,传入了一个对象的options

　　el:类型string | HTMLElement 主要是接管div到属性：只能接管一个div，所有需要vue处理，必须写在一个div里面

　　data:类型object | funciton 存放数据

　　methods:类型 {[key:string]:function} 它定义属于vue的一些方法,可以在其他地方调用,也可以在指令中使用

vue学习 基本简介,安装,示例,options

vue学习基本简介,安装,示例,options