Vue.js 入门 demo1
Vue.js 入门
- 学习 vue.js 需要 HTML CSS JavaScript 和 AJAX 的基础
- Vue 是一个 JavaScript 框架，能够简化 Dom 的操作，并且可以相应式的数据驱动
- Vue 的作者是中国人尤雨溪！
| 这篇笔记的内容 | 解释 |
|---|---|
| el | 挂载点，也就是挂载了这个元素及其子元素可以使用 vue 里面的各种属性和方法 |
| data | 储存这个 vue 实例里面的数据 |
| methods | 储存这个 vue 实例里面的方法 |
| v-text 或 {{ message }} | 设置标签的文本值 |
| v-html | 设置标签的文本值的同时也可以解析标签 |
| v-on 或 @事件 | 给这个元素绑定事件 |
| v-show | 元素的显示和隐藏 (给元素添加 display:none) |
| v-if | 元素的显示和隐藏 (通过删除这个元素) |
| v-bind 或 :属性 | 操纵元素的属性 |
| v-for | 根据数据的个数动态生成列表 |
| v-model | 双向绑定表单元素和 vue 实例中的 data 中的值 |
Vue基础语法学习
- 开始使用 Vue
Vue 的helloWorld
<script src="vue.js">script>
<div id="app">
{{message}}
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello Vue"
}
})
script>
- 这样就会在页面上打印 Hello Vue
el: 挂载点
- el 命中元素的内部也会被 Vue 管理
- el 同时支持id选择器，属性选择器 (class)，标签选择器(推荐使用 id 选择器)
- 支持所有双标签
- 但是无法选中 html 标签和 body 标签
{{message}}
<div id="app" class="app">
{{ message }}
<span>
{{ message }}
span>
div>
<script>
var app = new Vue({
// el: "#app",
el: ".app",
data: {
message: "菜鸟小铭"
}
})
script>
data: 数据对象
-
Vue 中用到的数据定义在 data 中
-
data 里面不仅可以放文字，还可以放对象，数组等复杂数据
-
使用数据时遵守 js 语法即可
-
新建一个 Vue 对象，并且 data 里面有一个对象
<div id="app" class="app">
{{ message }}
{{ object.name }}
{{ object.stu }}
div>
<script>
var app = new Vue({
// el: "#app",
el: ".app",
data: {
message: "菜鸟小铭",
object: {
name: "noobMing",
stu: "vue"
}
}
})
script>
Vue 本地应用
- Vue 指令指的是以 v- 开头的特殊语法
v-text 设置标签的文本值
- v-test 可以替换标签内的文本 (类似于 dom 里的innerText)
- {{}} 是 v-text 的简写
- 代码示例：
<div id="app">
<h2 v-text="message">testh2>
<h2>test{{ message }}h2>
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "菜鸟小铭"
}
})
script>
-
下面的方式和下面的方式的区别：
- 上面的方式把标签里的所有内容都替换掉
- 而下面的方式可以只替换部分内容 (这种方法叫插值表达式)
-
支持表达式，例如
v-test = "message + '!' "
v-html 设置标签的 innerHTML
-
v-html 和 v-text 的区别：
- 当处理纯文本的时候，他们没有区别
- 当处理 html 结构的时候，只有 v-html 能够解析
-
代码示例：
<div id="app">
<h2 v-html="message">testh2>
<h2>{{ message }}h2>
<h2 v-text="message">h2>
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "菜鸟小铭"
}
})
script>
-
输出的结果为：
-
只有 v-html 解析出了标签，v-text 和 插值表达式都没有解析出标签
v-on 绑定事件
- 使用
v-on:来绑定各种事件 - 我们可以把 v-on 替换成 @ 效果是一样的
- 方法要定义在 methods 里面
- 代码示例：
<div id="app">
<button v-on:click="doit">testbutton>
<button @click="doit">testbutton>
div>
<script>
var app = new Vue({
el: "#app",
methods: {
doit: function () {
console.log("doit");
}
}
})
script>
vue示例：计数器
-
一个盒子里面有一个左右按钮，点击能实现里面的数字加或者减
-
代码示例：(源代码太长只给出js部分的代码)
var count = new Vue({
el: ".input-num",
data: {
num: 0
},
methods: {
minus: function () {
this.num--;
},
plus: function () {
this.num++;
}
}
})
- 这个例子用到的知识点：
- el (挂载点)，data (数据)，methods (方法)
- 绑定事件的 v-on 指令也可以简写为 @
- 方法中通过 this 关键字来获取 data 中的数据
- v-text的简写为 {{}}
v-show 元素的显示和隐藏
- 根据表达式的真假，切换元素的显示和隐藏
- 通过修改元素的 display 属性来切换元素的显示和隐藏状态
- 数据改变之后状态会同步更新
- 使用方法：
<span v-show="flag">span>
- 代码示例：点击一个按钮，红色盒子出现，再点击一下消失
<button @click="changeShow">-button>
<span v-show="flag">span>
<script>
var count = new Vue({
el: ".input-num",
data: {
flag: false
},
methods: {
changeShow: function () {
this.flag = !this.flag
}
},
})
script>
v-if 元素的显示和隐藏
-
v-if 也是可以操纵元素的显示和隐藏，但是和v-show的原理不太一样，v-if 是直接删除了这个元素，而 v-show 只是给元素添加了
display: none这个属性 -
使用方法和 v-show 差不多
<button @click="changeIf">-button>
<span v-if="flag">span>
<script>
var count = new Vue({
el: ".input-num",
data: {
flag: false
},
methods: {
changeShow: function () {
this.flag = !this.flag
}
},
})
script>
- 点击按钮这个时候在F12中查看 span 这个标签消失了
- v-if 里面的值可以是一个表达式，只要返回的是布尔值就行
v-bind 操纵元素属性
- v-bind 可以操纵元素的各种属性
- 语法规范：
v-bind:属性名 = 表达式可以简写为:属性名=表达式 - 代码示例：
<div class="app">
<img v-bind:src="imageSrc" :title="imageTitle" :class="isActive?active:''">
div>
<script>
var app = new Vue({
el: '.app',
data: {
imageSrc: "这里填图片的路径",
imageTitle: "菜鸟小铭",
isActive: false,
}
})
script>
- 上面绑定类名的时候使用到的三元表达式等价于
{active:isActive}大概意思是前面的active的值取决于后面isActive的真假
案例：点击按钮切换图片
-
切换图片使用的是修改 src 属性
-
用一个数组储存所有的图片地址，然后左右按钮分别绑定两个点击事件，点击左按钮或者点击右按钮就设置 src 为 数组的上一个或者下一个，给左右按钮绑定 v-show ，如果左按钮的索引值为 0 或者右按钮的索引值为数组的长度减一则隐藏这个按钮
-
代码示例：
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
],
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
v-for 根据数据生成列表结构
- 根据数据的个数生成列表结构，是动态生成的，数组改变列表结构也改变
- v-for 是生成自己的复制
- 语法规范
(item, index) in 数据结构item：值 index：索引 - 代码示例：
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ item }} {{ index }}
li>
ul>
div>
<script>
var app = new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4, 5]
},
})
script>
- 输出1 2 3 4 5五个标签
v-on 补充
-
补充了自定义参数 和 事件修饰符
-
自定义参数是指用 v-on 绑定事件的时候里面的方法可以传递参数
-
事件修饰符指的是可以选择特定的条件触发这个事件 (例如摁下回车键等等)
-
代码示例：当摁下回车键时问候吃了没
<div id="app">
<input type="text" @keyup.enter="sayHi">
div>
<script>
var app = new Vue({
el: "#app",
methods: {
sayHi: function () {
alert("吃了没");
}
}
})
script>
v-model 获取和设置表单元素的值
- v-model 可以获取表单元素的值，当一个改变时另一个也跟着改变 (双向数据绑定)
- 代码示例：
<div id="app">
<input type="text" v-model="message">
div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "菜鸟小铭"
}
})
script>
- 当我们修改文本框中的内容时 message 的值也会跟着改变 (同样修改message的值也会修改文本框中的值)
功能案例：记事本
- 一个记事本，可以实现一个基础的便签功能
- 需要实现的功能：录入，删除，统计，清空
- 这个里面的难点就是怎么把 input 里面的内容变成下面的条目，这里把 input 和 vue 里面的一个字符串绑定，当我们摁下回车键之后把字符串里面的值给数组里，然后给 li 用 v-for 绑定储存内容的数组，这样就能边输入下面也就边显示了
splice(num, 1)第一个参数是从哪开始，第二个参数是删除几个
var notepad = new Vue({
el: ".notepad",
data: {
notepadArr: [],
message: ""
},
methods: {
// 录入记事本
entry: function () {
this.notepadArr.push(this.message);
},
// 清空记事本
wipe: function () {
this.notepadArr.splice(0, this.notepadArr.length);
},
// 删除某个元素
deleteNum: function (num) {
this.notepadArr.splice(num, 1);
},
}
})
- 同样只给出了 js 部分的代码，想要获取完整代码请看 记事本