Vue入门

最新推荐文章于 2025-01-25 17:09:17 发布

原创最新推荐文章于 2025-01-25 17:09:17 发布

· 141 阅读

0 ·

版权

文章标签：

#vue

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

笔记

2 篇文章

订阅专栏

Vue入门

什么是Vue.js？
库和框架的区别
MVVM的介绍
安装Vue
- cdn下载(需连接网络)
- 手动下载
Vue实例
双向数据绑定
什么是BootCDN

什么是Vue.js？

Vue是一个构建用户界面（UI）的【渐进式】JavaScript框架
有需要的可以去Vue的官网：https://cn.vuejs.org/
Vue的作者：尤雨溪/中国无锡

库和框架的区别

库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

MVVM的介绍

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM
M：model数据模型（JSON）
V：view视图（HTML）
VM：ViewModel 视图模型

V（修改数据） -> M 将视图层的数据通过事件将数据提交到后端服务器 onclick
M（修改数据） -> V 将后端数据（JSON）通过赋值的方式在视图层展现 $(’#id’).val()
数据是核心

安装Vue

cdn下载(需连接网络)

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
 <!-- 生产环境版本，优化了尺寸和速度 -->
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>

手动下载

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
      <script src="dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
      <script src="dist/vue.min.js"></script>

Vue实例

每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的

   <!-- 指定vue管理内容区域，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部不受影响 -->     
   <div id="d1">{{message}}</div>  
 
   var vm = new Vue({
     el：'#ID'         // DOM 元素，挂载视图模型，
     data：{},         // 定义属性，并设置初始值
     methods：{}       // 定义方法，用于事件交互时使用的函数  
   });

双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门案例</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="add">
			<h3>{{msg}}</h3>
			<input type="text"  />
			<!-- v-on代表是Vue指令，：后面代表的是参数 -->
			<button v-on:click="doClick">+</button>
		</div>
		
	</body>
	<script type="text/javascript">
		//作用是将Vue实例挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签,边界一定是根标签
		var vue=new Vue({
			el:'#add',
			//es6之前的写法
// 			data:{
// 				msg:'hello vue！'
// 			},
// 			data:function(){
// 				return {
// 					msg:'hello vue！'
// 				}
// 				
// 			},
			//es6之后的写法
			data(){
				return{
					msg:'hello vue'
				}
			},
			methods:{
				doClick(){
					console.log('方法被调用');
					this.msg='你大爷的';
				}
			}
		})
		
	</script>
</html>

什么是BootCDN

BootCDN是Bootstrap中文网支持并维护的前端开源项目免费CDN服务，致力于为Bootstrap、jQuery、Angular、Vuejs
一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务

官网：https://www.bootcdn.cn/
使用cdn的好处

1.不用担心自己网站访客，在任何时间，任何地点，任何网络运营商，都能快速打开网站，说白了就是把你的资源交给第三方托管，它快你的网站访问就快，并且不需要消耗你的网站流量，提升访问速度。
2.各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少。
3.给网站直接带来的好处就是：流量，咨询量，客户量，成单量，都会得到大幅度提升