Vue基础

Vue是一个渐进式前端框架，可以帮我们快速完成前端项目的开发

vue2 CDN

html

<script src="http://unpkg.zhimg.com/vue@2"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

浏览器环境vue2骨架

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="http://unpkg.zhimg.com/vue@2.6.14"></script>
    <script>
        const vm=new Vue({
            //声明监控范围
            el:'#app', 
            //创建m模型数据
            data:{
                
            }
        })
    </script>
</body>
</html>

1.MVVM

MVVM（Model–view–viewmodel）是一种软件架构模式，有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来

M：Model，即模型，其中包含模型数据，方法函数等
V：View，即视图，就是我们的html结构
VM：ViewModel，作为M和V的桥梁，用来同步数据更新

MVVM最大的特点就是数据同步更新，当我们在js中修改一个数据时，html中使用的数据会同步更新，而不是像原生js一样使用innerHTML类似的语法修改数据

2.Vue实例

每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：

Vue构造函数接收一个对象作为实参，其中包含Vue的各种配置项，如el、data、methods等

var vm = new Vue({
  // 选项
})

一个 Vue 实例其实正是一个MVVM模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。

2.1 el

Vue实例中有个重要的配置项，就是el（element），这代表的是被Vue管理的根元素，在这个元素内的所有元素都可以使用Vue相关的语法

el的值是一个字符串，格式和document.querySelector()的参数一样

html

<div id="app"></div>

<script>
    //第一种
    const vm = new Vue({
        el: '#app'
    })
</script>

根元素的挂载还有另一种语法

var vm = new Vue({
    // ...
})
vm.$mount('#app'),

2.2 data

data同样也是Vue中一个重要的配置项，所有的数据都在data中定义

const vm = new Vue({
    data: {
        key:'value',
        name:'蔡徐坤'
    },
})

data可以是一个对象，对象中定义各种数据

也可以是一个函数，通过return一个对象，在return的对象中定义各种数据

const vm = new Vue({
    data(){
        return{
            key:'value',
            name:'蔡徐坤'
        }
    }
})

在现实开发中，data一定要写成函数的形式，并且不能写箭头函数，否则会影响this的指向

3.模版语法

在Vue的html中，我们可以使用两个个大括号{{}}，来使用data中定义的数据

html

<div id="app">{{name}}</div>

<script>
    //第一种
    const vm = new Vue({
        el: '#app',
        data(){
            return{
                name:'蔡徐坤'
            }
        }
    })
</script>

此时{{}}中的变量会被解析成相应的值

{{}}相当于一个js环境，也可以写表达式

html

<div id="app">{{ age>18 ? "成年了" : "未成年" }}</div>

<script>
    //第一种
    const vm = new Vue({
        el: '#app',
        data(){
            return{
                age:18
            }
        }
    })
</script>

Vue基础 ​

1.MVVM ​

2.Vue实例 ​

2.1 el ​

2.2 data ​

3.模版语法 ​

Vue基础

1.MVVM

2.Vue实例

2.1 el

2.2 data

3.模版语法