Vue —— 基础（零）（模板语法、数据绑定、el/data写法、MVVM模型）

前端杂货铺

已于 2022-08-31 19:18:55 修改

阅读量1.7k

点赞数 1

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-03-18 09:31:00 首次发布

本文链接：https://blog.csdn.net/qq_45902692/article/details/123379744

版权

Vue2 专栏收录该内容

24 篇文章 55 订阅

订阅专栏

本文详细介绍了Vue2.x的基础知识，包括模板语法中的插值和指令，数据绑定的单向和双向绑定，以及el和data的多种写法。通过实例展示了如何在Vue中实现文本和属性的解析，以及MVVM模型的工作原理。适合初学者入门Vue2.x。

摘要由CSDN通过智能技术生成

Vue2.x 系列文章目录

内容	参考链接
Vue2.x - 基础（零）	模板语法、数据绑定、el/data写法、MVVM模型
Vue2.x - 基础（一）	数据代理、事件处理、键盘事件
Vue2.x - 基础（二）	计算属性、监听属性
Vue2.x - 基础（三）	样式绑定、条件渲染
Vue2.x - 基础（四）	列表渲染
Vue2.x - 基础（五）	内置指令、自定义指令
Vue2.x - 基础（六）	生命周期
Vue2.x - 基础（七）	组件化编程【非单文件组件】
Vue2.x 进阶	Vue2.x 进阶
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

一、初识 Vue

1. 在页面输出 HELLO VUE!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>HELLO,{{message.toUpperCase()}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false;   //阻止 vue 在启动时生成生产提示
    
        // 创建Vue实例 ({})只传一个参数，类型为对象(配置对象)
        new Vue({
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务
            data: {     //data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
                message: 'Vue!',
            }
        })
    </script>
</body>
</html>

二、模板语法

Vue模板语法有 2 大类：

1. 插值语法

功能：用于解析标签体内容。
写法：{{xxx}}， xxx 是 js 表达式，且可以 直接读取 到 data 中的所有属性。

2. 指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx 同样要写 js 表达式，且可以 直接读取 到 data 中的所有属性。

3. 简写方式

v-bind 简写为：
v-on 简写为 @

4. 实例（插值语法和指令语法）

使用插值语法 {{xxx}} 和 v-bind 指令呈现内容

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.url">{{school.name}}</a>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'八岁',
                school:{
                    name:'哔哩哔哩',
                    url:'https://www.bilibili.com/'
                }
            }
        })
    </script>

在这里插入图片描述

三、数据绑定

Vue中有两种数据绑定的方式：

1. 单向数据绑定(v-bind)

数据只能从 data 流向页面。

2. 双向数据绑定(v-model)

数据不仅能从 data 流向页面，还可以从页面流向 data。

3. 注意点

双向绑定一般都应用在表单类元素上 (如：input、select等)
v-model:value 可以简写为 v-model，因为 v-model 默认就是 value 值。

4. 实例（完整写法）

	<div id="root">
        单向数据绑定: <input type="text" v-bind:value="name1">{{name1}}<br/>
        双向数据绑定: <input type="text" v-model:value="name2">{{name2}}<br/>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name1:'单向数据绑定',
                name2:'双向数据绑定'
            }
        })
    </script>

5. 实例（简写方式）

	<div id="root">
        单向数据绑定: <input type="text" :value="name1">{{name1}}<br/>
        双向数据绑定: <input type="text" v-model="name2">{{name2}}<br/>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name1:'单向数据绑定',
                name2:'双向数据绑定'
            }
        })
    </script>

在这里插入图片描述

四、el 和 data 的两种写法

1. el 有2种写法

new Vue 时配置 el 属性。
先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定el的值。

2. data有2种写法

对象式
函数式
如何选择：目前哪种方法都可以，以后学习到 组件 时，data必须使用函数式，否则会报错。

	//对象式
	data: {
	
	}

	//函数式
	data() {
		return {
		
		}
	}

3. 一个重要的原则

由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。

4. el 的第一种写法

	<div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'vue'
            }
        })
    </script>

5. el 的第二种写法

	<div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script>
        var v = new Vue({
            data:{
                name:'vue'
            }
        })
        v.$mount("#root") 
    </script>

6. data 的第一种写法（对象式）

	<div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name:'vue'
            }
        })
    </script>

7. data 的第二种写法（函数式）

	<div id="root">
        <h1>你好,{{name}}</h1>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:function(){
                return{
                    name:'vue'
                }
            }
        })
    </script>

五、MVVM 模型

1. M：模型(Model)

data 中的数据

2. V：视图(View)

模板代码

3. VM：视图模型(ViewModel)

Vue 实例

4. 注意点

data 中所有的属性，最后都出现在了 vm 身上。
vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。

	<!-- div 里面是 View -->
	
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>

    <script>
        new Vue({  // new Vue({})是 ViewModel
            el: '#root',  
            data: {     
                name: '青岛',
                address: '山东'
                // data 里面的内容是 Model
            }
        })
    </script>