Vue学习 1初识Vue

Revin050

已于 2022-07-16 10:27:17 修改

阅读量198

点赞数 1

分类专栏： VUE学习文章标签： vue.js javascript 前端

于 2022-02-14 00:13:14 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122916135

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

Vue与传统方法的区别（以Hello Revin为例）

传统方法渲染页面

传统方法渲染页面代码如下

<body>
<div id="demo">
	<h1>Hello，Revin</h1>
</div>
</body>

传统渲染页面的方法是将传入的固定数据，在数据变化时修改较为麻烦。

Vue方法渲染页面

使用Vue方法完成Hello Revin实例的代码如下

<head>
<!-- 首先需要引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head> 
<body>
	<!-- 创建一个容器，方便后续Vue进行插入渲染。 -->
	<div id="demo">
	<!-- 在调用Vue中的data数据时，需要使用{{}}进行数据传输。 -->
		<h1>Hello，{{name}}，{{address}}</h1>
	</div>
	<script type="text/javascript" >
			//创建Vue实例
		var x =new Vue({
			el:'#demo', // el的意思是element el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
			data:{ //data中用于存储数据，数据供el所指定的容器去使用。
				name:'Revin',
			}
		})
	</script>
</body>

以上是通过Vue完成Hello Revin的方法。

传统方法与Vue方法的区别以及Vue的注意事项

通过比较传统方法与Vue方法实现Hello Revin实例的过程，不难发现如下区别

传统方法在实现过程中针对数据的修改较为麻烦，相对而言Vue修改数据仅需要操作Vue实例而不会去变动原有结构
在Vue实例构建过程中，通过el选择实例的服务对象。el全拼为element即选择元素
在原有结构中引入实例的数据时，采用{{}}的方法进行引入，即插值语法。

注意事项：

Vue实例和容器是一一对应的，如果存在一个实例多个容器的情况，默认只渲染第一个容器；如果存在多个实例一个容器的情况，默认采用第一个实例对容器进行渲染。
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
关于js表达式举例如下：
（1）a a代表一个具有自身值的变量
（2）a+b a+b代表两个变量进行简单运算
（3）demo(1) 函数调用
（4）x===‘6’? ‘a’:'b’三元表达式
（5）a.toUpperCase() 对变量进行简单的函数调用
关于if(){}、for(){}这种都不算是表达式。

Revin050

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习 1初识Vue

Vue与传统方法的区别（以Hello Revin为例）传统方法渲染页面传统方法渲染页面代码如下<body><div id="demo"> <h1>Hello，Revin</h1></div></body> 传统渲染页面的方法是将传入的固定数据，在数据变化时修改较为麻烦。Vue方法渲染页面使用Vue方法完成Hello Revin实例的代码如下<head><!-- 首先需要引入Vue --&g
复制链接

扫一扫