一、Vue简介
学过前端的人都懂JQuery,我们通过简单比较JQuery来认识Vuejs框架:
JQuery:
使用选择器($)操作DOM对象(赋值、取值、事件绑定等),属于原生的HTML开发(数据与界面一体化)。
vue:
通过Vue对象将数据和View页面完全分离。对数据进行操作无需引用相应的DOM对象,通过Vue对象实现双向数据绑定,通过对数据的操作就可以完成对页面视图的渲染。就是MVVM开发模式。
jquery 是以操作dom为主,vue.js是以操作数据为主,你只需要操作数据就好,dom自动更新
简单总结
jquery是直接操作dom元素的前端脚本语言。
vue是将页面元素封装成一个数据对象来操作的前端框架。
二、安装方式
1、 下载并安装node.js
网址:https://nodejs.org/en/ 根据自己电脑系统选择合适的版本,安装方式跟普通Win软件一样,安装完成在cmd命令窗口使用 node -v查询版本号
node -v
2、安装npm
打开cmd,使用淘宝NPM镜像下载安装(国内镜像网速快):
输入命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成在cmd命令窗口使用 npm -v查询版本号;
npm -v
3、vue-cli安装
在cmd命令窗口运行 cnpm install -g vue-cli
cnpm install -g vue-cli
安装完成输入 vue 查看安装结果:
4、创建Vue项目
创建一个文件夹workspace_webstorm,并用cmd命令行进入此文件夹下(cd D:\workspace_webstorm),执行命令:vue init webpack web-cus-vue,按下图提示输入 Yes和No进行组件安装:
vue init webpack web-cus-vue
之后按Enter键选择安装插件。就可发现workspace_webstorm文件夹下多了个web-cus-vue文件夹,使用cd命令进入这个文件夹内,执行 npm install 命令进行项目安装,安装完成后项目中多了node_modules文件夹:
npm install
5、启动vue项目
使用cmd命令进入web-cus-vue文件夹内,执行npm run dev即可运行项目:
npm run dev
打开浏览器即可访问项目:http://localhost:8080
三、实现第一个HelloWorld
修改项目中的文件src/APP.vue如下,引入HelloWorld组件(后面会深入学习组件):
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/HelloWorld'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 样式代码 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下来,修改src/components/HelloWorld.vue文件如下代码:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'HelloWorld,这个是我的第一个VUE项目!'
}
}
}
</script>
END.