文章目录
引导视频
为什么要用Vue?
JavaScript太臃肿了，项目过大很容易发生重名等问题
Vue是渐进式JavaScript框架。Vue.js的核心库只关注视图层，它可以通过在现有的HTML代码中添加一些特殊的标记，使得数据和UI之间的关联变得简单。这个核心库非常轻量级，可以与现有的项目或其他库进行无缝集成。
Vue能把对象统一管理，减少各种错误出现率，提高效率
vue的基础使用
先在官网下载Vue.js
https://v2.cn.vuejs.org
创建html文件，导入vue.js
创建Vue对象
el是一个关键属性，它指定了Vue实例所挂载的元素。
data是vue存放数据的地方
methods存放vue的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{msg}
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"hello vue!"
},
methods:{
}
})
</script>
</body>
</html>
执行结果：
指令
数据绑定指令
v-text 填充纯文本
例如将上例中的
<div id="app">
{msg}
</div>
修改为
<div id="app" v-text="msg"></div>
可实现同样的效果。
v-html 插入html样式
尽量不使用
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用
v-html，永不用在用户提交的内容上。
v-pre 显示原始内容
例子
<div id="app" v-text="msg" v-pre>
hello, world!
</div>
结果将是div中的原始内容"hello world!"
v-model 数据绑定
通过v-model，修改页面上的数据，vue的data中的对应值也会改变
<div id="app" >
<input type="text" v-model="msg">
</div>
初始值如下
修改页面上的值
事件绑定
v-on
用于响应式，类似于js
点击例子
加入按钮
<div id="app" >
<input type="text" v-model="msg">
<button v-on:click="submit">改变</button>
</div>
//也可简写为
// <button @click="submit">改变</button>
新建函数
methods:{
submit(){
alert(this.msg)
}
},
此时当改变输入框中的值，可以看到data中的msg也改变了
如果需要传入参数，可参考以下形式
<button @click="submit(user)">改变</button>
将事件作为参数传递
通过利用event参数可以获取与事件相关信息
只有event作为参数传递可以省略，即默认为event
<button @click="submit">改变</button>
有多个参数时，在最后加上
<button @click="submit(username, $event)">改变</button>
函数配置
submit(event){
alert(event.target)
}
这里将显示当前事件
阻止冒泡行为
什么是冒泡行为？
执行子元素的某个事件时，行为向上传递，父元素也执行相同的行为
如下例
<div id="app" @click="check">
<input type="text" v-model="user.username">
<button @click="submit">改变</button>
</div>
//methods的内容
methods:{
submit(event){
alert(event.target)
},
check(){
alert("check")
},
},
当点击按钮，上层check函数也会被触发
加入stop即可阻止向上传递的冒泡行为
<button @click.stop="submit">改变</button>
阻止默认行为
默认行为：事件自动触发浏览器执行的行为，如点击链接跳转、点击按钮提交、鼠标左键框出选中文本
我们在实现某些功能的情况下，可能需要提交表单，同时又不希望刷新页面，可通过阻止默认行为来实现。
<a href="https://www.bing.com" @click="clickw">bing</a>
此时点击会跳转到必应
加入prevent
<a href="https://www.bing.com" @click.prevent="clickw">bing</a>
此时点击了不会跳转
按键修饰符
可以实现按下对应按键执行事件
如实现选中文本框，按下enter修改文本框内的值
<input type="text" v-model="user.username" @keyup.enter="enterc">
enterc(){
console.log("回车点击")
this.user.username="enter"
}
结果：
自定义按键修饰符
Vue.config.keyCodes.s = dowm
此处定义s按键为down，可用以下方法绑定
<input type="text" v-model="user.username" @keyup.dowm="enterc">
实现效果同上
属性绑定
通过v-bind间html标签的属性值与data中的对象进行绑定
如实现点击改变链接的提示信息
<a href="https://www.bing.com" v-bind:title="titles" @click.prevent="change">bing</a>
//可以简写为
<a href="https://www.bing.com" :title="titles" @click.prevent="change">bing</a>
change(){
console.log(this.titles);
this.titles = "sogou"
console.log(this.titles);
}
可以看到初始是bing，之后变为sogou
分支循环结构
v-if
选择，满足条件则显示，如下例
<div v-if="num >= 1">数目多</div>
change(){
console.log(this.titles);
this.num += 1;
this.titles = "sogou"
console.log(this.titles);
}
初始num为0，数目多不显示
点击之后将会显示
因为此时的num等于1，满足了条件
v-for
类似for循环，可实现循环遍历
<div v-for="data in nums">{{data}}</div>
data中加入以下变量
nums:[1, 2, 3],
可实现遍历
也可利用下面方法获取序号
<div v-for="(data, index) in nums">{{index}} {{data}}</div>
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
