用管理员模式运行cmd,cd到指定路径,输入命令:vue create proname。
项目名必须是全小写。
初识Vue:
1、要想vue工作,必须创建一个vue实例,且要传入一个配置对象。
2、容器里的代码依然符合html规范,只是汇入了一些特殊的vue语法。
3、容器里的代码被成为}【vue模板】。
4、{{xxx}},两个大括号中的为被替换的占位符,或者是JS表达式(表达式指的是会返回一个值的语句)(不能是JS语句)。
5、一个容器只能有一个vue实例接管(容器与vue实例关系是一对一)。
# 结果:hello,无心
<div id="root">
//{{name.toUpperCase()}},可以转大写
<h1>hello,{{name}}</h1>
</div>
<script>
//把id为root的容器下的{{name}}替换为无心
const x = new Vue({
el: "#root",
data: {
name: "无心"
}
});
</script>
为什么{{}}能显示data中的数据
vue会自动给data中的数据会自动作数据劫持做数据代理(数据代理:添加get与set方法)。
const vm = new Vue({
data: {
name: "李义新"
}
})
console.log(vm);
因为{{}}中可以显示vue对象的属性,Vue是把data中的数据添加到vue对象的属性中了。
插值语法与指令语法
插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
指令语法:
功能:用于解析标签(包括:标签属性,标签体内容、绑定时间等)。
写法:vue中有很多指令,且形式都是:v-???,此处我们只是拿v-bind举个例子。
v-bind(单向绑定)
v-bind可以给标签中任意属性绑定值。
单向绑定:绑定变量的改变会改变页面上对应的内容,但页面上的内容更改不会改变变量。
语法:v-bind:href="url",也可简写为::href,(简写后只需要写上冒号加属性名)。
<div id="root">
<a v-bind:href="url">百度链接</a>
</div>
<script>
new Vue({
el: "#root",
data: {
url: "https://www.baidu.com"
}
});
</script>
v-model(双向绑定)
双向绑定:绑定变量的改变会改变页面上对应的内容,页面上的内容更改也会改变变量的内容。
双向绑定一般用于表单元素上(如:input,select等)
v-model只能应用于表单类元素(输入类元素)上。
v-model:value:可以简写为v-model,因为v-model默认手机的就是value的值。
el与data的另外两种写法
el后续绑定
<div id="root">
请输入:<input type="text" :value="name">
<br>
</div>
<script>
const vue = new Vue({
data: {
name: "李义新"
}
})
vue.$mount("#root");
</script>
data函数式
<div id="root">
请输入:<input type="text" :value="name">
<br>
</div>
<script>
new Vue({
el: "#root",
//data后不能是箭头函数
data: function () {
return {
name:"liYi"
};
}
//或者----------------------------------
data() {
return {
name:"liYixin"
};
}
})
</script>
MVVM
M:model模型
V:view视图
VM:viewModle视图模型
model数据经过view显示在页面,页面数据被更改后通过ViewModel返回给model。
绑定点击事件
v-on:click="点击事件函数名"。
v-on:click="点击事件函数名",可简写为@click="点击事件函数名"。
点击事件函数在对应定义模板的methods的定义中。
函数默认会接收一个event参数。
<div id="root">
<button v-on:click="showInfo">点击触发事件</button>
<hr>
</div>
<script>
let val = "xin";
const vm = new Vue({
el: "#root",
data: {
name: val
},
methods: {
showInfo(event) {
alert("hello");
console.log("hello");
}
}
})
</script>
在调用点击事件函数时传递参数
在定义调用函数时加上括号和参数就可以了,但是这样就无法接收event参数了
<div id="root">
<button @click="showInfo(666)">点击触发事件!</button>
<hr>
</div>
<script>
let val = "xin";
const vm = new Vue({
el: "#root",
data: {
name: val
},
methods: {
showInfo(value) {
console.log("值:"+value);
}
}
})
</script>
如果想接收自定义的参数和event,就必须用$event来占位(参数和$event的位置不限)。
<div id="root">
<button @click="showInfo($event,666)">点击触发事件!</button>
<hr>
</div>
<script>
let val = "xin";
const vm = new Vue({
el: "#root",
data: {
name: val
},
methods: {
showInfo(event, value) {
console.log(event);
console.log("值:" + value);
}
}
})
</script>
事件修饰符
- 阻止默认事件:@Click.prevent="事件函数"
- 阻止事件冒泡:@Click.stop="事件函数"
- 事件只触发一次:@Click.once="事件函数"
- 使用事件的捕获模式:@Click.capture="事件函数"
- 事件默认应为立即执行,无需等待事件回调执行:@Click.passive="事件函数"
- <div @Click.passive="showInfo"></div>,先执行默认事件再执行回调函数(showInfo).
- <div @Click="showInfo"></div>,默认是先执行回调函数(showInfo).后执行默认事件。
- 只有event.target是当前操作的元素时才能除法:@Click.self="事件函数"
- <div @click.self="showInfo"><button @click="xxx"></></div>,当点击button时不会触发div的点击事件,可以阻止冒泡。
冒泡与捕获的区别
键盘事件
- @keyup:键盘弹起时触发
- @keydown:键盘按下时触发
- @keyup.enter="事件函数":回车键弹起时触发,vue给常用的按键起了别名。
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab(必须配合@keydown使用,因为tab会切换焦点)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
<div id="root">
<!-- @keyup.enter代表回车键弹起 -->
请输入:<input type="text" @keyup.enter="showInfo">
<hr>
</div>
<script>
let val = "xin";
const vm = new Vue({
el: "#root",
data: {
name: val
},
methods: {
showInfo(e) {
//e.keyCode按下键的编码 e.key按下键的名称
// if (e.keyCode != 23) //按的不是回车就退出
// return;
console.log(e.target.value);
}
}
})
</script>