初识Vue及第一个Vue实例

最新推荐文章于 2024-06-19 16:06:57 发布

碌碌无为的勤劳家

最新推荐文章于 2024-06-19 16:06:57 发布

阅读量172

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/wildwofe/article/details/106533653

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue的初学准备

开发文档

vue官方文档的下载地址:https://cn.vuejs.org/v2/guide
b.npm官方文档的下载地址:https://www.kancloud.cn/shellway/npm-doc/199982
webpack官方文档下载地址:https://doc.webpack-china.org/concepts

推荐浏览器

Chrome

编程工具

HBuilder X

Vue的安装和使用

Vue的安装
在Vue.js的官网直接下载vue.min.js并用<script>标签引入
下载地址 https://vuejs.org/js/vue.js
vue官方安装说明网址 https://cn.vuejs.org/v2/guide/installation.html
vue的使用有如下三种方式
1. 打开下载链接直接新建一个vue.js文件把源代码复制粘贴到自己的vue.js中
2. 通过cdn方式引入vue文件
  Vue推荐使用的网址 https://unpkg.com/vue
  staticgile CDN 国内推荐使用网址https://cdn.staticfile.org/vue/2.6.11/vue.min.js
  unpkg 推荐使用的网址https://unpkg.com/vue/dist/vue.js
  cdnjst推荐使用网址 https://cdnjs.clounflare.com/ajax/libs/vue/2.6.11/vue.min.js（需翻墙）

如：<script src="https://unpkg.com/vue"></script>

cdn是内容分发系统，它的主要作用是将网站的内容发布到最接近用户的网络边缘，使用户可以就近取得所需的内容，提高响应速度

		3. 采用npm和webpack模块包形式引入vue.js（后面再讲）

npm是现在前端开发的主要工具。将复杂的JavaScript文件库组织成模块化的管理方式。(包的管理工具) 在使用时制定需要的模块即可
webpack将模块化编码的程序进行打包生成，从而允许在不支持es6的浏览器中运行

第一个Vue实例

<body>
		<!--每个程序必有一个个也是唯一一个 带有id的最外层元素(div)-->
		<div id="app">
			<p>商品名:{{name}}</p>
			<p>价格:{{price}}</p>
			<!--使用vue中的数据  {{key}}-->
			name = {{name}}
		</div>
	</body>
	<!--1.引入vue.js文件-->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="https://unpkg.com/vue" type="text/javascript" charset="utf-8"></script>-->
	<!--2.创建vue实例-->
	<script type="text/javascript">
		//创建vue实例
		var vm = new Vue({
			//el绑定id为app的div元素
			el:'#app', 
			/*
			  1.双向绑定的数据vm对象可以映射到model中，model改变以后会
			  影响vm数据
			  2.vm可以改变view中的数据  view中的数据优惠影响vm中的数据
			  3.双向绑定的数据都是键值对 key:value,
			*/
			data:{
				//使用data属性可以向双向绑定机制中传入数据
				//key:value
				name:'吹风机',
				price:'99元'
			}
		});
		console.log(vm);
	</script>

页面效果：
在这里插入图片描述

碌碌无为的勤劳家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue及第一个Vue实例

Vue的初学准备开发文档vue官方文档的下载地址:https://cn.vuejs.org/v2/guideb.npm官方文档的下载地址:https://www.kancloud.cn/shellway/npm-doc/199982webpack官方文档下载地址:https://doc.webpack-china.org/concepts推荐浏览器Chrome编程工具HBuilder XVue的安装和使用Vue的安装在Vue.js的官网直接下载vue.min.
复制链接

扫一扫

专栏目录