Vue的实现流程:
1、在HTML的body标签中引入需要通过Vue进行数据绑定的标签
2、在HTML中的相关的视图标签中设置标签元素的id()
3、通过外链的形式将Vue的核心库进行导入:
4、在另外一个script中书写对应的Vue–JS脚本
--(1:创建对应的Vue对象,并且进行实例化)
--(2:指定Vue对象绑定的标签元素–》el:"#app"
--(3:设置Vue对象所存储的数据–》data:{message:“Vue基础入门”,name:“JavaScript”
})
5、在HTML中引入的视图标签中通过插值表达式的形式将Vue对象的数据和插值表达式进行绑定
<body>
<div id="app">
{{message}}
div>
body>
<script src="js/vue.js">script>
<script>
//TODO:vue的第二部分:实例化vue对象-->用脚本JS代码进行数据存储
new Vue({
// 1、vue作用的视图
//TODO:el属性:指定vue对象作用的视图-->指定视图的id属性值和css中的id选择器类似
// el是Element元素的缩写,与HTML中的元素id属性值相同,进行数据绑定
el:"#app",
//2、vue存放的数据
//TODO:data属性:指定vue对象存储的数据-->指定数据的名称和值
/*
语法:
data:{
数据名称:数据值,
数据名称:数据值
}
*/
data:{
message:"vue基础入门"
}
})
script>
html>
对Vue对象赋予其方法:(
1、在创建Vue对象的时候,通过let ve=new Vue({})
为Vue对象去一个变量名,方便JS中的其他函数调用Vue对象的函数以及变量
2、可以定义多个函数放在Vue对象中methods中–》调用的时候需要通过这种形式(Vue对象名.methods.methods中的方法)去调用
3、数据模型的另外一种创建方式:
data(){return{name:"",age:"",methods:{hi:function(){}}}}
)
<body>
<div id="div">
<div>姓名:{{name}}div>
<div>班级:{{classRoom}}div>
<button onclick="hi()">打招呼button>
<button onclick="update()">修改班级button>
div>
body>
<script src="js/vue.js">script>
<script>
// 将Vue对象定义一个变量名--》ve方便其他的JS普通函数去调用Vue对象中的方法
let ve=new Vue({
el:"#div",
// Vue对象中存放的数据的写法:
// data:{
// name:"张三",
// classRoom:"1班"
// },
// 另外一种写法:
data(){
return{
name:"张三",
classRoom:"1班",
// 可以定义多个函数放在Vue对象中methods中--》调用的时候需要通过这种形式(Vue对象名.methods.methods中的方法)去调用
// 语法:
methods: {
updateClassRoom:function(){
ve.classRoom="2班"
},
hi:function(){
alert("hello world")
}
}
}
}
})
// 定义一个普通函数,在函数中调用Vue对象中的方法
function hi(){
ve.methods.hi()
}
function update(){
ve.methods.updateClassRoom()
// ve.updateClassRoom()-->报错调用失败
}
script>
Vue指令的使用注意:
1)Vue的指令必须写在HTML中的标签的属性中,不能在属性值中写JS代码
2)Vue的指令只能用在Vue对象绑定的视图中,不能写在JS脚本中
1、文本插值指令v-html(可以解析data中的HTML标签)
通过<标签名 v-html=“vue中的data的key”>标签名>
<body>
<div id="div">
<div>{{msg}}div>
<div v-html="msg">div>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
msg:"Hello Vue
"
}
});
script>
2、绑定任意HTML标签属性指令v-bind(可以为HTML中的标签的任意属性进行绑定data值,包括css选择器的值)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定任意标签属性title>
<style>
.my{
border: 1px solid red;
}
style>
head>
<body>
<div id="div">
<a href={{url}}>百度一下a>
<br>
<a v-bind:href="url">百度一下a>
<br>
<a :href="url">百度一下a>
<br>
<div :class="cls">我是divdiv>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"my"
}
});
script>
3、v-if(v-else-if,v-else)和v-show条件渲染指令
v-if v-show 他们俩虽然都是控制元素是否显示,但是底层的原理不一样
1、v-if 如果条件为false,页面中根本没有这个元素
2、v-show如果条件为false,页面中有这个元素只不过它的display属性值为none
<body>
<div id="div">
<div v-if="num%3 == 0">div1div>
<div v-else-if="num%3 == 1">div2div>
<div v-else>div3div>
<div v-show="flag">div4div>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
num:1,
flag:true
}
});
script>
4、v-for列表渲染指令(分为增强for,和普通for)
4.1增强for:
语法:
4.2普通for:
语法:
<body>
<div id="div">
<ul>
<li v-for="element in names">
{{element}}
li>
<br>
<li v-for="stu in student">
{{stu}}
li>
<li v-for="(x,index) in names">
索引:{{index}}-值:{{x}}
li>
<br>
<li v-for="(x,index) in student">
索引:{{index}}-值:{{x}}
li>
ul>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
names:["张三","李四","王五"],
student:{
name:"张三",
age:23
}
}
});
script>
5、v-on或者@进行事件绑定事件(相较于原有的JS事件绑定把原有的on去掉)
语法:
(推荐简写方法)
<body>
<div id="div">
<div>{{name}}div>
<button onclick="change()">单击_改变div的内容button>
<button v-on:click="change">单击_改变div的内容button>
<button v-on:dblclick="change">双击_改变div的内容button>
<button @click="change">简写_改变div的内容button>
div>
body>
<script src="js/vue.js">script>
<script>
let ve=new Vue({
el:"#div",
data:{
name:"齐天大圣"
},
methods:{
change(){
this.name = "美猴王"
}
}
});
change = function(){
ve.methods.change()
}
script>
6、表单绑定(*重要*)v-model
单向绑定:Vue的数据模型改变,HTML的标签视图改变
HTML的标签视图改变,Vue的是数据模型不变
双向绑定:Vue的数据模型改变,HTML的标签视图改变
HTML的标签视图改变,Vue的是数据模型跟着改变
<body>
<div id="div">
<form autocomplete="off">
姓名_单向绑定:<input type="text" name="username" :value="username">
<br>
姓名_双向绑定:<input type="text" name="username" v-model:value="username">
<br>
年龄:<input type="number" name="age" v-model:value="age">
性别:<input type="text" name="gender" v-model:value="gender">
form>
<hr>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23,
gender:"男"
}
});
script>