基础知识
node
安装 Node（傻瓜式安装）
npm基础
npm 之于 Node.js ，就像 pip 之于 Python 。
npm 不需要单独安装。在安装 Node 的时候，会连带一起安装 npm 。
查看npm镜像源
$ npm config get registry
修改npm镜像源
$ npm config set registry https://registry.npm.taobao.org
更新npm
- Linux
$ sudo npm install npm@latest -g
- Windows
$ npm install npm -g
查看npm版本
$ npm -v
安装包
# 本地安装
$ npm install <package name>
# 全局安装
$ npm install -global <package name>
$ npm install -g <package name>
安装 vue
# 全局安装
$ npm install -g vue
# 本地安装
$ npm install vue
安装 vue-cli
# 全局安装
$ npm install -g @vue/cli
# 本地安装
$ npm install @vue/cli
安装 webpack
# 全局安装
$ npm install -g webpack
# 本地安装
$ npm install webpack
安装 axios
$ npm install --save axios
用图形化管理界面创建项目
Windows系统必须用cmd，否则报错。
用命令行打开项目文件夹（一般切换到 D 盘），
打开图形化界面
$ vue ui
在图形化界面下创建项目
创建成功后使用 编辑器 打开项目进行开发。
必须在项目目录下才可以
# 建立Web测试环境，实时查看界面效果。
$ npm run serve
# 生成html文件，用于发布到服务器上。
$ npm run build
模板
-
动态的HTML页面
-
包含了一些 JS 语法代码
- 双大括号表达式
- 指令（以 v- 开头的自定义标签属性）
-
双大括号表达式
- 语法：{{msg}}
- 功能：向页面输出数据
- 可以调用对象的方法
-
指令一：强制数据绑定
- 语法：<a
v-bind:href='url'></a>(要写在标签内部，不仅仅是a标签可以用) - 功能：指定变化的属性值
- 完整写法：
v-bind:xxx='msg' - 简写：
:xxx='msg'
- 语法：<a
-
指令二：绑定事件监听
- 功能：绑定指定的事件名的回调函数
- 写法：
v-on:事件="回调函数名" - 简写：
@事件="回调函数名"
demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo1">
<h2>双大括号：{{msg}}</h2>
<p>{{msg.toUpperCase()}}</p>
</div>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
msg: 'hello, Jack!'
}
})
</script>
<div id="demo1-1">
<a v-bind:href="url">百度一下</a><br>
<a :href="url">百度</a>
</div>
<script type="text/javascript">
new Vue({
el: '#demo1-1',
data: {
url: 'http://www.baidu.com'
}
})
</script>
<div id="demo1-2">
<button type="button" v-on:click="click1">click1</button>
<button type="button" @click="click2">click2</button>
</div>
<script type="text/javascript">
new Vue({
el: '#demo1-2',
methods: {
click1(){
alert('click1')
},
click2(){
alert('click2')
}
}
})
</script>
</body>
</html>
网友评论