黑马前端与移动开发视频教程 移动前端开发技术 web前端与移动开发视频教程
前言
Vuejs相关教程，可参阅网站，先熟悉vue.js的基本语法。本文档讲述，以CDN的方式（在页面上，引入相关的js和css文件），来实现。
本文档适用于vuejs初学者，之前给公司实习生学习准备的，很多相关知识暂不全，敬请谅解。
1 页面结构
vue.js 使用了基于 html 的模版语法，允许开发者声明式地将 DOM 绑定至底层 vue 实例的数据。简单来说,最基本结构如下就是:
<head>
<meta charset=”UTF-8″>
<title>demo</title>
<script src=”https://cdn.bootcss.com/
vue/2.4.2/
vue.min.js”></script>
</head>
<body>
<div id=”app”>
{{mes}}
</div>
</body>
<script>
el: ‘#app’,
data: {
mes: ‘hello’
}
})
</script>
这里边body的最外层的div，需要在下边进行实例化。当然最外层用的是id=’app’，实例化的时候，el:’#app’。跟css类似，如果最外层用class来标识的时候，里边#换成“点”。但是为了避免重复，统一用“id”来标识。
2 基本模块
上半边省略，直接上js代码
<script>
new Vue({
el: ‘#app’,
data: {
// 初始化页面上绑定的模型，数据
},
filters: {
// 过滤器，简单数据处理。
},
mounted: function () {
// 页面载入时调用的方法，
},
methods: {
// 事件方法
},
watch: {
// 数据监听。
}
})
</script>
data: 页面初始化时，定义的元素模块，也是数据的容器，每一个栏位都会用到，类似于之前的普通写法里边的name，id等，但是比那个强大。
filters:这一块是过滤器，一般是处理数据用的。
mounted：页面加载是调用的方法，这便涉及到Vuejs的生命周期，大家可以去了解。根据不同情况调用，我自己遇到过关于图表方面，家在先后顺序的问题。
watch: 用于页面模块的数据监听。数据发生改变的时候，页面展示进行切换。
methods:事件方法都写在这个里边。例如点击事件。
正常情况下，页面结构就是上边的属性，当然顺序调换也未尝不可，看个人习惯。除了data外，其他模块用不到的，可以去掉。
3.vue.js常用的指令
文本指令
常用的数据绑定，双大括号的形式。{{ ··· }}
v-text 纯文本的方式展示出来
v-html 会解析你数据里边带的标签，以及样式，事件等等
v-model 功能最全，你把v-model放到input里边的时候，你会发现，你的input这个栏位，跟其他几个，message变成了双向绑定，你改变input里边的值，其他的值会跟着一起变动
<body>
<div id=”app”>
{{message}}
<div v-text=”message”></div>
<div v-html=”message”></div>
<input v-nodel=”message” />
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: “<h1>Hello World</h1>”
}
})
</script>
运行上边的结果你会发现，{{···}}和“v-text”这种方式，会把message所有的东西输出,v-html会解析message里边的html标签，而v-model会绑定，message里边的数据，当你改变input里边的数据，页面上其他的数据也会相应改动。
v-bind指令
html中的属性值，通常会用到这个指令，例如以下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中，class1为一直生效，class2和class3必须根据A，B对应的布尔值来展示，true的时候生效，反之不生效。 指令简写可以直接是”：class”，省去前边的v-bind.
<style>
.class1 {
color: red;
}
.class2 {
font-size: 16px;
}
</style>
<body>
<div id=”app”>
<div :class=”[class1,{‘class2’:A}]”>
{{message}}
</div>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: “<h1>Hello World</h1>”,
class1: ‘class1’,
A: true
}
})
</script>
(这种情况，可用于，按钮点击，更换状态，样式等)
v-if(v-else-if,v-else)指令
主要是在页面上给出相应的条件，例如
<style>
p {
font-size: 30px;
}
</style>
<body>
<div id=”app”>
<input v-model=”message”>
<p v-if=”message<12″ style=”color:red;”></p>
<p v-else-if=”message>20″ style=”color:green;”></p>
<p v-else style=”color:yellow;”></p>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: “<h1>Hello World</h1>”,
A: true
}
})
</script>
跟普通的if..else..语句的写法基本类似，也可以进行嵌套。
v-for指令,数据循环，基本写法
<body>
<div id=”app”>
<div v-for=”item in message”>
{{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: [
{ name: “张三” },
{ name: “李四” }
]
}
})
</script>
也可以加嵌套，二维数组使用，限定结构一致
<body>
<div id=”app”>
<div v-for=”item in message”>
{{item.name}}
{{item.age}}
<div v-for=”it in item.study”>
{{it.yuwen}}
{{it.shuxue}}
</div>
</div>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: [
{
name: “张三”,
age: “24”,
study: [
{
yuwen: “95”,
shuxue: “80”
}
]
},
]
}
})
</script>
vuejs,2.0中，v-for循环也可以加键名和索引，例如：
<body>
<div id=”app”>
<div v-for=”(item,key,index) in message”>
{{index}}{{key}}{{item.name}}
</div>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: [
{ name: “张三” },
{ name: “李四” }
]
}
})
</script>
value为对应字段行。key为键名，index为索引。这三个只是顺序，不带表真实参数，你写ABC下边双括号也写ABC也可以
。
循环的时候，我们可以写在v-model,或者有图片的时候，我们可以写在:src上
例如：<input v-model=”item.name”>
<img :src=”item.name”>
标签中不允许带双括号。例如，以下这种写法
<img :src=”{{item.name}}”>
4.vue.js常用事件
点击事件
常用事件声明为v-on:click=”hello()”，无参数，可以不带括号，有参数写括号中。简写方式@click=”hello()”，事件写在methods：{ ~~~ }里边。格式如下
<body>
<div id=”app”>
<input type=”button” @click=”demo()”>
<input type=”button” @change=”hello(‘aaa’)”>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
},
methods: {
demo: function () {
},
hello: function (a) {
}
}
})
</script>
事件是可以继承的，简单来说，比如一个事件，我们需要在页面上调用多次，我们可以直接进行事件继承。
<body>
<div id=”app”>
<input type=”button” @click=”demo()”>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
},
mounted: function () {
this.hello();
// 页面载入时调用hello方法，
},
methods: {
demo: function () {
this.hello();
// 点击时调用到了hello方法
},
hello: function (a) {
// ~~~
}
}
})
</script>
监听事件
监听事件，当栏位值发生改变的时候，使用。，原来的js采用的是change事件，vuejs也可以用@change=””的方式来写，这样的话写在，跟点击事件一样，写在methods：{ ~~~ }里边。
但是部分框架，@change这种方式不兼容，所以我们一般直接用v-model进行绑定，写在watch:{ }里边，例如：
<body>
<div id=”app”>
<input type=”text” v-mode=”message”>
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: ’20’
},
watch: {
message: function (val, oldval) {
// 自带两个参数,其中val为当前值，oldval为改变后的值
}
},
methods: {
}
})
</script>
过滤器
过滤器写在filters:{}里边，一般对数据进行处理的时候会用得到。直接在文本后边加上“|”，然后跟这写，事件名。例如
<body>
<div id=”app”>
{{message | demo}}
</div>
</body>
<script>
new Vue({
el: ‘#app’,
data: {
message: ’20’
},
filters: {
demo: function (val) {
return “$” + val + “.00”;
}
}
})
</script>
移动互联网应用技术前端开发 移动端
web前端开发实例 ui设计移动前端开发就业前景
前端开发者
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册