文章目录
1.第一个实例
script标签在HTML页面放置的位置
https://blog.csdn.net/weixin_45832482/article/details/123289919
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p> {{message}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
}
})
</script>
</body>
</html>
2.安装
2.1 安装nvm
用于下载和管理nodejs的版本
nvm安装与使用
https://www.jianshu.com/p/4849adf7fccc
nvm list
nvm list available
nvm install [node版本号]
nvm uninstall [node版本号]
nvm use [node版本号]
2.2 nodejs
通过nvm下载nodejs
node -v
2.3 npm
npm是nodejs的包管理和分发工具,nodejs中包含npm。
npm 常用命令
https://blog.csdn.net/qq_39579242/article/details/123169709
npm -v
npm config list
npm config set registry https://registry.npm.taobao.org //设置淘宝镜像源
npm config set registry https://registry.npmjs.org //设置npm源
npm install cnpm -g --registry= https://registry.npm.taobao.org //安装淘宝镜像
3.构建Vue项目
3.1 安装Vue.js
(1)直接下载vue.min.js,并用 script标签引入
(2)使用 CDN 方法
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
(3)使用NPM安装
cnpm install vue
3.2 创建项目
cnpm install --global vue-cli // 全局安装 vue-cli
vue init webpack my-project // 创建一个基于 webpack 模板的新项目
cd my-project
cnpm install // 安装依赖
cnpm run dev // 运行
3.3 Vue 项目打包并运行
3.3.1 打包
// 执行完成后,会在 Vue 项目下生成一个 dist 目录,一般包含 index.html 文件及 static 目录,static 目录包含了静态文件 js、css 以及图片目录 images。
// 如果直接双击 index.html 打开浏览器,页面可能是空白了,想要正常显示,可以修改 index.html 文件中 js、css 文件的路径。
npm run build
3.3.2 开发测试-项目中运行
npm run dev
3.3.3 服务器部署-运行dist文件
// 运行dist
npm i -g serve
cd dist
serve
4.Vue项目结构
目录/文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码。 |
config | 配置目录,包括端口号等。初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块。 |
src | 开发目录 (1) assets: 放置一些图片,如logo等。(2) components: 存放组件。(3) App.vue: 项目入口文件,可以直接将组件写这里,而不使用 components 目录。(4) main.js: 项目的核心文件。 |
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除。 |
.xxxx文件 | 一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
4.1 Vue文件加载执行流程
(1)执行index.html文件
(2)执行main.js文件
(3)main.js挂载了app.vue文件,用app.vue的templete替换index.html中的
(4)main.js中注入了路由文件,将对应的组件渲染到router-view中
(5)router-view中加载Layout文件
(6)Layout 加载Navbar, Sidebar, AppMain
Vue文件加载执行流程
https://blog.csdn.net/IT__learning/article/details/114294180
npm包的安装与卸载
https://blog.csdn.net/ernijie/article/details/104948880
4.2 修改页面并测试
src/App.vue
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
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/Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎来到菜鸟教程!'
}
}
}
</script>
5.main.js中实例化Vue
Vue 构造器:
(1)el 参数: DOM 元素中的 id
(2)data:定义属性,实例中有三个属性分别为:site、url、alexa
(3)methods :定义函数,可以通过 return 来返回函数值
(4){{ }} :输出对象属性和函数返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>site: {{site}}</h1>
<h1>url: {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
el: "#app",
data: data,
methods: {
details: function () {
return this.site + "aa";
}
}
})
vm.site = "教程"
document.write("===========================<br>");
document.write(vm.site);
document.write("<br>");
document.write(vm.$data === data); // 前缀$,以便与用户定义的属性区分开
document.write("<br>");
document.write(vm.$el === document.getElementById('app')) // true
document.write("<br>===========================");
</script>
</body>
</html>
6.模板语法
6.1 显示文本:插值表达式 {{ }}
<div id="app">
<p>{{ message }}</p>
</div>
6.2 显示Html:v-html
使用 v-html 指令输出 html 代码
<body>
<div id="app">
<div v-html="t"></div>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
t: '<h1>t111<h1>',
}
})
</script>
</body>
6.3 绑定html属性值:v-bind
HTML 属性中的值应使用 v-bind 指令。
label标签中for属性和input绑定,使得点击label时会选中input。
input标签中v-model实现双向绑定。
v-bind绑定div的class属性。
id选择器#,class选择器.
pre预定义格式,等宽字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.class1 {
background: aliceblue;
color: bisque;
}
</style>
<body>
<div id="app">
<label for="i1">点击切换颜色</label>
<input type="checkbox" id="i1" v-model="use">
<div v-bind:class="{'class1': use}">
AAAAAAAAAAAAAAAAAAAA
</div>
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
use: false,
url: 'http://www.runoob.com'
}
})
</script>
</body>
</html>
6.4 表达式
Vue.js 提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#list1 {
background: aliceblue;
color: bisque;
}
</style>
<body>
<div id="app">
{{ 5+5 }} <br>
{{ ok ? 'true' : 'false' }} <br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list' + id">AAAA</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
ok: true,
message : '123456789',
id: 1
}
})
</script>
</body>
</html>
6.5 条件判断是否显示:v-if
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。
v-if 指令将根据表达式 的值(true 或 false )来决定是否插入元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<label for="i1">点击显示</label>
<input type="checkbox" id="i1" v-model="use">
<p v-if="use">现在你看到我了</p>
<template v-if="use">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
use: false
}
})
</script>
</body>
</html>
6.6 监听DOM事件:v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="show()">
</div>
<script>
new Vue({
el: '#app',
data: {
use: false
},
methods: {
show : function () {
alert(1);
}
}
})
</script>
</body>
</html>
6.7 修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault(),阻止默认的事件发生。
下面.prevent会阻止表单在submit后的刷新事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<form v-on:submit.prevent="onSubmit">
<input type="submit" value="submit">
</form>
<form v-on:submit="onSubmit">
<input type="submit" value="submit">
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
use: false
},
methods: {
onSubmit : function () {
console.log('submit')
}
}
})
</script>
</body>
</html>
6.8 用户输入:v-model双向数据绑定
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
6.9 文本格式化:过滤器
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
</body>
</html>
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,message 是第一个参数,字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
6.10 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
7.条件语句:v-if v-else-if v-else
也可以使用 v-show 指令来根据条件展示元素,用法和v-if相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1 {
background:blue;
color: grey;
}
</style>
<body>
<div id="app">
<form>
<input type="radio" name="sex" value="male" v-model="se">Male<br>
<input type="radio" name="sex" value="female" v-model="se">Female<br>
<input type="radio" name="sex" value="None" v-model="se">None<br>
</form>
<div v-if="se === 'male'">
Male
</div>
<div v-else-if="se === 'female'">
Female
</div>
<div v-else>
None
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
se: 'male'
}
})
</script>
</body>
</html>
8.循环语句:v-for
8.1 数组
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1 {
background:blue;
color: grey;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="site in sites">
{{ site.name }}
</li>
</ul>
<ul>
<template v-for="site in sites">
<li>{{ site.name }}</li>
</template>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
</body>
</html>
8.2 迭代对象
通过一个对象的属性来迭代数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1 {
background:blue;
color: grey;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="object in objects">
{{ object }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
objects: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术,更是梦想!'
}
}
})
</script>
</body>
</html>
用value-key-index接收数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
.class1 {
background:blue;
color: grey;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in objects">
{{ key }} : {{ value }}: {{ index }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
objects: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术,更是梦想!'
}
}
})
</script>
</body>
</html>
迭代整数
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>