初识Vue

鹿蹊zz

已于 2022-07-25 20:48:26 修改

阅读量274

点赞数 3

分类专栏： Vue前端框架整理文章标签： vue.js 前端 javascript

于 2022-07-25 20:44:27 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125981771

版权

Vue前端框架整理专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js的基本概念，如其渐进式框架的特点，以及如何通过组件化和声明式编码提高开发效率。文章深入讲解了Vue实例的创建，包括el挂载点的选择和data数据对象的使用。此外，还阐述了插值语法与指令语法的应用，并解释了MVVM模型的工作原理，帮助读者理解Vue在视图层与数据模型间的桥梁作用。

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

一、Vue简介

1.基本概念

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

2.特点

（1）组件化模式，提高代码复用率，让代码更好维护。

（2）声明式编码，无需直接操作DOM，提高开发效率。

二、基本结构

1.步骤

在 head 标签中，添加vue.js文件。

准备一个容器：在容器中使用插值语法或者指令语法，获取vue实例中的数据。

准备 vue 实例：设置el属性和data属性。

键 el 的值为通过CSS选择器得到的容器；

data 的值为 vue实例要与容器交互的数据内容。

2.el挂载点

el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。

（1）el挂载点的作用范围？ el命中的元素内部及其后代元素

（2）el适用于其他的选择器吗？

el : " #app " //id选择器
el : " .app " //class选择器
el : " div " //标签选择器
建议使用id选择器，因为id选择器是唯一的，其他的选择器都会命中多个元素。容易造成语义的不清晰。

（3）是否可以选择其他的DOM元素？可以选择其他的元素，包括p标签，h2标签等。

注意：只支持双标签，不支持单标签。<body></body>此双标签不支持el挂载点。

3.data数据对象

vue中用到的数据定义在data中，data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。

vue可以定义复杂类型的数据，包括对象类型、数组类型等

渲染复杂类型的数据时，遵守js的语法即可。

    <div id="app">  <!-- view层 -->
			<h2>{{name}}</h2><!-- 大括号语法 -->
	</div>
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止弹出生产者提示
 
        // 创建vue实例 -- 配置对象：键的值不可更改，对应的值类型不能随便改
        // 建立起容器 app 与 当前vue实例 的联系，值通常为 CSS选择器字符串
        const vm = new Vue({
            el:'#app',
            // el:document.getElementById('app') 这种写法通常不用
            // data 中用于存储数据，数据提供 el 所指定的容器去使用
            // 值暂时先写成一个对象，后期会写成一个函数；使用插值语法，将值写进容器中
            data:{
                name:"张三",
                age:18
            }
        })
 
     </script>

三、插值语法与指令语法

插值语法 主要用在标签体中。

双花括号内填js表达式。age: {{age}}

指令语法 通常用来管理标签(标签属性,标签体内容,绑定事件)，以v-开头

v-bind: 用来管理标签属性，可以缩写为 :

例如：v-bind:href="xxx"，xxx表示的是js表达式。

注意：无论是插值语法还是指令语法，其填充的都是 js表达式。

    <body>
		<div id="app">
			<!-- <h2 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h2> -->
			<h2 :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h2> 
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data:{
					message:`页面加载于${new Date().toLocaleString()}`
				}
             // data不能使用 ()=>{} 类型的箭头函数，否则其 this 会指向 windows，而不是我们的vue 
             // 实例。
	        // 由于是普通函数，实际操作中，可以省去 :function 直接写 data() {}。
			})
		</script>
	</body>