02——初始Vue以及差值语法

已于 2022-07-13 23:41:54 修改
阅读量218 收藏
点赞数
分类专栏： vue 2.0 文章标签： vue.js 前端 javascript
于 2022-07-10 20:56:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45080272/article/details/125710362
版权

初始Vue以及差值语法

1、如何引入Vue

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	
</body>
</html>

当引入vue之后，你的全局多了一个名为Vue的构造函数
所以就可以用 new Vue()

1.1 script 标签解释

  • 作用：用于定义客户端脚本，常用于引入 JavaScript 文件
  • 说明：它既可包含脚本语句，也可以通过src属性指向外部脚本文件，在包含脚本语句时，只需要使用type属性即可。
// 在包含脚本语句的时候 只需要使用type属性就行
<script type="text/javascript">
	var i = 10;
	if (i < 5) {
		// 代码内容
	}
</script>

// 在用 src 引入外部脚本语句的时候，<script></script> 之间为空
// 如果既不使用async也不使用defer，那么在浏览器继续解析页面之前，立即读取并执行脚本
<script src="" type="text/javascript" charset="UTF-8" async="async"></script>
<script src="" type="text/javascript" charset="UTF-8" defer="defer"></script>

<script type="text/javascript">
// 放在之间的是文本类型(text)。
// javascript是告诉浏览器里面的文本是属于javascript脚本
// <script> 不能使用单标签,必须使用 <script></script> 才可正常使用

2、怎么测试是否引入vue

在这里插入图片描述
2.1 去除上图中Download…
直接安装 vue-devtools（开发者工具）

  • git命令下载：git clone https://github.com/vuejs/devtools.git
  • 安装依赖：npm install
  • 编译：npm run build

参考：https://www.jianshu.com/p/8bba67b017ff
有问题参考：https://blog.csdn.net/drhrht/article/details/123227510

安装之后的结果
在这里插入图片描述
这是一个提示：

您正在开发模式下运行Vue。在进行生产部署时，请确保打开生产模式。

在这里插入图片描述
这里面所有的东西都是对 vue 进行全局的配置，意思：一次修改到处可用

2.2 关闭提示

分析：影响这个提示的选项是：productionTip ，我们看下官网对productionTip 的解释
在这里插入图片描述
怎么修改，如下

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
	</script>
</body>
</html>

3、Vue案例

案例第一个逻辑

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>Hello.尚硅谷</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
	</script>
</body>
</html>

页面
在这里插入图片描述
思考
在代码中Vue已经引入了，全局的提示取消配置也已经准备好了，为什么没有使用Vue呢？
只能说Vue已经待命了，没有写让Vue工作的代码

3.1 Vue 案例之 差值语法 {{}}

3.1.1 使用Vue

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>Hello.尚硅谷</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		// 创建 Vue 实例
		const x = new Vue({
		 // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。
		 // el:document.getElementById('root')还有这种写法 不常用
			el: '#root',
		})
	</script>
</body>
</html>

解释
看上面代码：上面说了引入Vue 就相当于全局多了一个名为Vue的构造函数，所以我们用 new Vue()来创建一个Vue实例对象
下面的Vue和上面的div容器形成了一一对应的关系，div中的值会随着vue实例变化而变化。

  • 其中 el 全称element(元素) ，后面的值’#root’ 是 vue 用id选择器指定一个容器
  • 还可以上面 class = “root” el后面写成 ‘.root’

3.1.2 差值语法使用

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>Hello.{{name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		// 创建 Vue 实例
		const x = new Vue({
			el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
			data: { // data 中用于存储数据，数据供 el 所指定的容器去使用 容器以外的容器不负责，这个值我们暂时先写成一个对象
				name:'尚硅谷'
			}
		})
	</script>
</body>
</html>
  • el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById(‘root’)还有这种写法 不常用
  • data 中用于存储数据，数据供 el 所指定的容器去使用 容器以外的容器不负责，这个值我们暂时先写成一个对象
  • const x 可以不用

3.1.3 如果有两个相同的容器，vue以哪个为准
注意：一个vue实例不能同时接管两个容器
一个vue实例对应两个root容器

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div class = "root">
		<h1>Hello.{{name}}</h1>
	</div>
	
	<div class = "root">
		<h1>Hello.{{name}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		// 创建 Vue 实例
		const x = new Vue({
			el: '.root', // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
			data: { // data 中用于存储数据，数据供 el 所指定的容器去使用
				name:'尚硅谷'
			}
		})
	</script>
</body>
</html>

页面
在这里插入图片描述

两个vue实例对应一个 root 容器

<!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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>Hello.{{name}} {{address}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		// 创建 Vue 实例
		new Vue({
			el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
			data: { // data 中用于存储数据，数据供 el 所指定的容器去使用
				name:'尚硅谷'
			}
		})
		 new Vue({
			el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
			data: { // data 中用于存储数据，数据供 el 所指定的容器去使用
				address:'北京昌平'
			}
		})
	</script>
</body>
</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>初始Vue</title>
	<!-- 引入vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id = "root">
		<h1>Hello.{{name}}.{{address}}</h1>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
		// 创建 Vue 实例
		new Vue({
			el: '#root', // el 用于指定当前 Vue 实例为了哪个容器服务，值通常为 css 选择器字符串。el:document.getElementById('root')还有这种写法 不常用
			data: { // data 中用于存储数据，数据供 el 所指定的容器去使用
				name:'尚硅谷',
				address:'北京'
			}
		})
	</script>
</body>
</html>

在这里插入图片描述

3.2 初识Vue总结

  • 1、想让Vue 工作，就必须创建一个Vue 实例，且要传入一个配置对象（el 或者 data）

  • 2、root 容器里的代码依然符合html规范，只不过混入一些特殊的Vue语法（本文就是差值语法）

  • 3、root 容器里面的代码被称为【Vue 模板】

  • 4、Vue 实例和容器是一一对应的

  • 5、真实开发中只有一个Vue 实例，并且会配合着组件一起使用

  • 6、{{xxxx}} 中的 xxxx 要写js 表达式，且 xxxx 可以自动选取到 data 中的所有属性

  • 7、一旦 data 中的数据要发生改变，那么页面中用到该数据的地方也会自动更新

  • 注意区分：js表达式 和 js 代码（语句）
    1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
    （1） a
    （2） a+ b
    （3） demo(1)
    （4） x === y ? ‘a’ : ‘b’
    2、js 代码（语句）
    （1） if () {}
    （2） for() {}

在这里插入图片描述

活学编程思想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue_02：详细语法以及代码示例 + 知识点练习 + 综合案例（第二期）
Forever_Hopeful的博客
08-06 1072
Vue中的计算属性、以及watch监听器的使用。同时对上一期的知识点和第二期的知识点进行了综合运用（涵盖了综合案例）水果购物车业务。包含源码哦！
Vue_01学习：详细语法以及代码示例 + 小练习 + 综合案例 （第一期）
Forever_Hopeful的博客
08-04 1040
Vue_01学习：详细语法以及代码示例 + 小练习 + 综合案例 （第一期）
vue模板语法（差值语法，指令语法）
mmxiguang的博客
09-07 477
插值语法和指令语法
差值操作mustache语法-双大括号
yuan_21的博客
06-13 518
案例： 主要介绍mustache语法中内容可以是变量，也可以是变量组合而成的表达式。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="app"> <!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -
VUE_学习笔记
滨海之君的博客
04-12 632
模板语法
Vue学习笔记（一）插值语法和指令
weixin_46015333的博客
12-31 2801
文章目录一、Vue是什么？二、知识点2.1.基础结构2.2.模板语法2.2.1.插值语法{{}}2.2.指令v-htmlv-oncev-bindv-if 、v-else-if、v-elsev-showv-on:clickv-for总结 一、Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各
插值语法与指令语法
qq_50768380的博客
09-29 558
2.v-model.value可以简写成v-model，因为v-model默认收集的就是value的值。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。
初始VuePPT，基本标签
07-28
Vue 基础知识点总结 Vue 是一个基于 JavaScript 的渐进式框架，专门用于构建用户界面。下面是 Vue 的一些基础知识点总结： Vue 实例 * el 选项：用于设置 Vue 实例挂载的元素，可以使用选择器指定元素，建议使用 ...
Vue基础第二篇
m0_66451927的博客
07-10 316
二、.插值语法 mustache 语法、v-once、 v-html、 v-text、 v-pre: {{}}、 v-cloak: 斗篷 三. v-bind（重点） 3.1. v-bind 绑定基本属性 3.2. v-bind 动态绑定 class 3.3. v-bind 动态绑定 style 四. 计算属性 1、计算属性与插值语的区别： 2、计算属性的s ette r和 getter 3、methods 和 computed 区别...
Vue——学习笔记整理（继续整理中）
Thaley的博客
01-19 1213
整合了一下黑马vue入门以及尚硅谷Vue2&Vue3全家桶的学习笔记
Vue day01
世轩的博客
06-07 173
一. 什么是VUE: 什么是: (1). 第三方开发的: 必须要下载才能使用 (2). 基于MVVM设计模式的: (待续…) (3). 渐进式的: 可以逐步在项目中使用vue的技术。比较容易和其他技术(DOM、jQuery)混搭。但是，强烈不建议！ (4). 纯前端js框架: 与nodejs无关，只需要浏览器就可以运行！ 为什么: 传统DOM和jQuery都存在着大量重复的编码！只有vue以及同类框架技术，才能几乎彻底的避免大量重复编码！提高开发效率 何时: 今后，只要以数据操作为主的项目，都可
vue基础篇笔记(一)
团酱
12-09 1209
1、Vue是什么？ 官方上：e (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue:基本mvvm(model-view-viewmodel)的设计模式的前端框架,其中的vm可以理解为mvc当中的controller,（把数据渲染到页面
vue2x计算属性
weixin_45802907的博客
11-16 187
vue 计算属性 computed 定义：要用的属性不存在，要通过已有属性计算得来。 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 备注： 计算属性最终会出现在vm上，直接读取使用即可。 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的
前端学习（1182）:差值表达式
歌谣的博客
05-18 1731
插值表达式语法：{{}} 使用时请注意以下几点： 插值表达式是vue框架提供的【指令】 插值表达式中 不可以写代码片段 会报错 属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性（下篇文章讲） 代码演示： <!DOCTYPE html> <html lang="en"> <head> ...
vue笔记---模板语法-插值
qq_34530330的博客
03-06 1967
1.文本 数据绑定最常见的形式就是使用‘Mustache’语法（双打括号）的文本插值： message:{{msg}} 使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。 但请留心这回影响到该节点上所有的数据绑定： this will nver change:{{message}} 2.纯html 双打括号会将数据解释为纯文本，而非html。为了输出ht
Vue实例以及插值语法
BoringError的博客
12-05 2087
文章目录一、Vue实例1.1、创建实例对象1.2、数据关联二、插值语法2.1、文本插值2.2、原始html插值2.3、属性插值三、在插值中使用JS表达式 更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页 一、Vue实例 1.1、创建实例对象 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // ...
vue2.0
onlyeverstudy的博客
03-14 950
Vue
vue的两种常用模板语法
weixin_55761900的博客
04-13 152
1.差值语法 功能：用于解析标签体内容 写法：{{xxx}} 示例： 2.指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件） 写法：v-bind：href=“xxx” 示例：
FreeMarker语法之插值规则
yztezhl的专栏
07-25 2422
FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format} 1、通用插值 对于FreeMarker的通用插值,又可以分为以下4种情况: 1. FreeMarker插值结果为字符串值:直接输出表达式结果 2. FreeMarker插值结果为数字值:根据默认格式(由#setting指令设置)将表达式结果转换成文本输出.
vue的差值语法举例说明
最新发布
09-05
Vue 的差值语法是一种在 HTML 的模板中插入 JavaScript 表达式的方式，它允许开发者在 HTML 页面上动态渲染数据。一个简单的例子是，如果您在 Vue 实例中定义一个变量 message，可以使用{{ message }}来在 HTML 页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值