博客
关于我
什么是Vue以及Vue的环境的搭建?
阅读量:80 次
发布时间:2019-02-25

本文共 966 字,大约阅读时间需要 3 分钟。

1.什么是Vue.js?

vue.js是现阶段最火的前端框架,是主流的框架之一。与其它两个框架Angular,React一样都是前端的框架,是目前三大主流框架之一。它是构建用户界面的框架,只关注视图层,可以与第三方库进行整合实现开发一些大型的项目,前端的工作主要是与MVC中的V打交道,也就是视图层。

2.为什么去学习前端的框架?

  1. 提高企业的开发效率
  2. Vue中用户不需要去手动的去操作DOM,解放用户的双手,让程序员更多的去关注业务逻辑
  3. 可以加强行业的竞争力

3.框架与库的区别

框架是一套完整的解决方案,项目如果要去更换框架,则需要重构整个项目
库是一个插件的概念也就是第三方提供的,一个小功能去实现个别的需求,若此需求不能实现可以换其它的库

4.Vue环境的搭建

1.下载vue.js
官网下载:

2.代码的实现

<body><!-- app根容器,new的vue可以控制内部的所有内容 -->    <div id="app">    	<h1>姓名:{  {name}}</h1>    	<h1>年龄:{  {age}}</h1>    	<h1>邮箱:{  {email}}</h1>    </div>    <!-- 引入vue库src表示vue.js所在的路径 -->    <script src="./libs/vue.js" type="text/javascript"></script>    <script>    	/*实例化app*/    	/*var app=new Vue({    		el:'#app',    		data:{    			msg:"hello vue!"    		}    	})*/    	var app=new Vue({    		el:'#app',//表示new的这个实例去控制哪个区域    		data:{//data属性存放的是el中所用到的数据    			name:'jay',    			age: 24,    			email:'jay@163.com'    		}    	})    </script></body></html>

3.页面效果
在这里插入图片描述
注意:以上部分只适合于初学者学习vue,真正的开发中一个vue.js是远远不够的!!!

转载地址:http://eao.baihongyu.com/

你可能感兴趣的文章
npm升级以及使用淘宝npm镜像
查看>>
npm发布包--所遇到的问题
查看>>
npm发布自己的组件UI包(详细步骤,图文并茂)
查看>>
npm和package.json那些不为常人所知的小秘密
查看>>
npm和yarn清理缓存命令
查看>>
npm和yarn的使用对比
查看>>
npm如何清空缓存并重新打包?
查看>>
npm学习(十一)之package-lock.json
查看>>
npm安装 出现 npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! 解决方法
查看>>
npm安装crypto-js 如何安装crypto-js, python爬虫安装加解密插件 找不到模块crypto-js python报错解决丢失crypto-js模块
查看>>
npm安装教程
查看>>
npm报错Cannot find module ‘webpack‘ Require stack
查看>>
npm报错Failed at the node-sass@4.14.1 postinstall script
查看>>
npm报错fatal: Could not read from remote repository
查看>>
npm报错File to import not found or unreadable: @/assets/styles/global.scss.
查看>>
npm报错TypeError: this.getOptions is not a function
查看>>
npm报错unable to access ‘https://github.com/sohee-lee7/Squire.git/‘
查看>>
npm淘宝镜像过期npm ERR! request to https://registry.npm.taobao.org/vuex failed, reason: certificate has ex
查看>>
npm版本过高问题
查看>>
npm的“--force“和“--legacy-peer-deps“参数
查看>>