Vue框架_vet框架-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41141896/article/details/93888989

Vue框架：又称渐进式JS框架。只关注view层，可动态构建用户界面，有两个核心点：数据变化（视图会自动变化），组件式开发（有利于维护和可重用）。渐进式指：逐步开发

1.1.3. Vue 的特点

1：遵循 MVVM架构模式：model view view-model

2：编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3：它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

虚拟DOM：就是单独渲染自己更改的div，而不是整个页面整体更新，会利用内存建立虚拟DOM之间的层级关系，就可只更新某一块，从而渲染真实DOM。

VUE用MVVM架构模式：model view view-model

有三种引用方式：
一：直接引入在script中，跟JQuery一样,下载文档

网络端引入：
<script src="http://cdn.jsdelivr.net/npm/vue">

Vue入门模板：Vue可简单理解为动态的 html 页面，其包含了一些 JS 语法代码

1：双大括号表达式：语法:{{exp}}

功能: 向页面输出数据

可以调用对象的方法

2：指令(以 v-开头的自定义标签属性)

//创建VUE示例，new

var vm=new  Vue({
   el:'#box',//el表作用区间
    data:{
     msg：'hello vue',//键：值
      }
});

<div id="box">
  <h1>{{msg}}</h1>
[</div>

模板语法和数据绑定：
{{}}//双大括号
模板语法里面可以写一些简单的js语法
<h1>{{mymsg.toUpperCase()}}</h1>
<h1>{{mymsg=''true:false}}</h1>
<h1>{{mymsg+'world'}}</h1>

示例代码一：Vue入门程序

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){//窗口加载事件
				new Vue({//创建VUE对象
					el:'#box',//绑定要操作的对象
					data:{// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
						msg:'Hello Vue'//用v-model绑定msg的内容
					}
				});	
			}
		</script>
	</head>
	<body>
		<div id="box">
			<input type="text" id="box" value="" v-model="msg" /><br>
			{{msg}}
			<br>
			<span v-text="msg"></span>
		</div>
	</body>
</html>