<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 将需要改变的数据不要写死了,需要与vue建立 -->
<h1>hello,{{name}} </h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示
//创建vue实例
// const x =-->
new Vue({
el: '#root',//用于之地你那个当前vue实例为哪个容器服务,值通常为css选择器字符串
data: {
//data中用于存数据,数据供el所指定的容器去使用。值我们暂时先写成一个对象
name: '尚硅谷123'
}
})
</script>
在开始之前我们要知道目前vue是分了vue2 和vue3的,具体的内容可以去官网看看:
vue官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js
引入vue:
cdn
下载压缩包
使用npm
引入vue是要放在head标签中
下面是我的测试,仅供参考!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- vue引入 -->
<!-- 1、cdn 2、下载js包 3、使用npm,用node -->
<!-- 开发版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> -->
<!-- 生产版本 ,体积更小可支持2和3,vue检测不到所以建议用开发做调试-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<!-- v -渲染页面-->
<div id="root">
<!-- <div class="root"> -->
<h1>这是第一块区域</h1>
<!-- 插值表达式{{}} ,不能写复杂的js代码-->
<!-- 1、渲染基本数据 -->
{{msg}}
<!-- 2、基本运算 -->
{{1+5}}
<!-- 3、三元运算 -->
{{flag ?'真':'假'}}
</div>
<!-- 如果使用class,只有第一个有数据/效果 -->
<!-- <div id="root">
<h2>这是第二块区域</h2>
{{msg}}
{{1+5}}
{{flag ?'真':'假'}}
</div> -->
<div id="app">
<h2>这是第二块区域</h2>
{{msg}}
{{1+5}}
{{flag ?'真':'假'}}
</div>
<!-- 1-vue2 -->
<script>
//创建一个vue的实例
var vm = new Vue({//vm-控制层
el: '#root',
// el: '.root',
data: {
//m-数据源
msg: '哈哈哈哈,老团',
flag: false,
hah: 'heihei',
}
})
//一个页面一个实例,el建议使用id不建议使用class,
// var vm1 = new Vue({
// el: '#app',
// data: {
// msg: '哈哈哈哈,老团',
// flag: false
// }
// })
</script>
<!-- <script>
// console.log(123);
function ha() {
console.log(555);
}
</script>-->
</body>
</html>
下面这个是完整的一个vue3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- vue3版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="root">
{{msg}}
</div>
<script>
//vue3实例用crateApp
const app = Vue.createApp({
//data:{}-vue2这是写成一个对象,而vue3写成一个方法
data() {
return {
msg: 'hello world!'
}
}
})
// //通过.mount挂载到对应的根节点上
const vm = app.mount('#root')
console.log(vm);
/*
vue3:proxy对象代理-es6新增
vue2:object.defineProperty
*/
// vue3最新方式-解构赋值
const { createApp } = Vue
createApp({
data() {
return {
msg: 'hello world!'
}
}
}).mount('#root')
</script>
</body>
</html>
一、内置指令
1、v-model、v-bind指令
v-model:双向数据绑定 不能简写
v-bind:单向数据绑定 可以直接简写成:
v-model的测试:
<body>
<div id="root">
<input type="text" v-model="value" />
{{value}}
<p @click="charge()">{{ww}}</p>
<h1>{{diandan}}</h1>
<input type="checkbox" value="薯条" v-model="diandan" />薯条
<input type="checkbox" value="烤鱼" v-model="diandan" />烤鱼
<input type="checkbox" value="炸鸡" v-model="diandan" />炸鸡
<input type="checkbox" value="可乐" v-model="diandan" />可乐
<input type="checkbox" value="汉堡" v-model="diandan" />汉堡
</div>
<script>
const vm = new Vue({
el: '#root',
data() {
return {
value: "",
ww: 'heihei',
diandan: [],
}
},
methods: {
charge() {
this.ww = '哈哈'
}
}
});
</script>
效果图:
v-bind测试:可以绑定style、src、class(常用)等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
<style>
.haclass {
font-size: 30px;
background-color: beige;
}
.heiclass {
font-size: 50px;
background-color: rgb(237, 237, 48);
}
.fz {
font-size: 80px;
}
.bg {
background-color: red;
}
.col {
color: white;
}
.bb {
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="root">
<div>{{msg}}</div>
<!-- v-bind:
对象语法
-->
<div :class="ha">{{msg}}</div>
<button @click="change()">发生改变</button>
<!-- 动态绑定数组 -->
<div :class="classObj">动态绑定数据</div>
<div v-bind:class="classObj">动态绑定数据</div>
<br>
<!-- 数组语法 -->
<div :class="[fz,bg]">哈哈哈,现在气氛真尴尬!!!</div>
<!-- 数组对象 -->
<div :class="[{'fz':isF,'bg':isC},col]">哈哈来看看数组对象</div>
<!-- 会不会与普通class有覆盖问题 ,不存在覆盖问题。会叠加-->
<div :class="ha" class="bb">覆盖问题</div>
<!-- 三元运算 -->
<div :class="num===1?fz:bg">看是哪个属性</div>
</div>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: '#root',
data() {
return {
msg: '有人感兴趣',
ha: 'haclass',
classObj: {
//如果在此处赋值,后面可以跟字符串/布尔值的true,false
fz: true,
bg: true,
},
fz: 'fz',
bg: 'bg',
isF: true,
isC: true,
col: 'col',
num: 1,
}
},
methods: {
change() {
this.ha = 'heiclass'
//如果去改变的话,只能使用布尔值
this.classObj.bg = false
}
}
});
</script>
</body>
</html>
效果图:
2、v-text、v-html、v-cloak指令
<!-- 1、将数据显示在页面中,如果没有这个数据会报错 -->
<h1 v-text='msg'></h1>
<!-- 2、逻辑运算 -->
<h1 v-text="msg+haha"></h1>
<!-- 3、三目运算 -->
<h1 v-text="1>2?'大于':'小于'"></h1>
<!-- 4、变量拼接 -->
<h1 v-text="msg+msg"></h1>
<!-- v-text会覆盖掉里面的内容 -->
<h1 v-text="msg">{{hei}}</h1>
<!-- 二、v-html -->
<p v-html="hei"></p>
<p v-text="hei"></p>
<p v-html="hei+'111'"></p>
v-cloak指令(没有值):
1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}的问题。
<div v-cloak>{{msg}}</div>
const vm = new Vue({
el: '#root',
data() {
return {
msg: '哈哈哈',
// hei:'呵呵呵'
hei: '<h1>文件间</h1>'
}
},
methods: {
},
})
{{}}如果加载比较慢,页面会直接出现{{msg}},为防止出现这种情况,可以使用v-cloak
3、 v-if、v-show指令
v-show和v-if
共同点:控制元素显示和隐藏
不同点:v-show是控制元素的display,v-if创建和删除dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div v-show="true">{{msg}}</div>
<div v-show="false">{{msg}}</div>
<div v-if="false">{{msg}}</div>
<div v-if="true">{{msg}}</div> -->
<button @click="change()">点击切换</button>
<br>
<img src="img/biaoqing1.png" v-if="imgChange">
<img src="img/biaoqing2.png" v-if="!imgChange">
<!-- 需要放在div里才有效果 -->
<h1 v-if="age<18">未成年</h1>
<h1 v-else-if="age>=18 && age<40">青年</h1>
<h1 v-else-if="age>40 && age<100">中年团子</h1>
<h1 v-else>老年</h1>
</div>
<script>
/*
v-show和v-if
共同点:控制元素显示和隐藏
不同点:v-show是控制元素的display,v-if创建和删除dom节点
*/
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: '#root',
data() {
return {
msg: '我出现了',
imgChange: true,
age: '20'
}
},
methods: {
change() {
this.imgChange = !this.imgChange
}
}
});
</script>
</body>
</html>
效果图:
4、v-for、key指令
等同于for循环
for in of
js for in 遍历对象
js for of 遍历数组
vue in of 没有区别
<ul>
遍历数组
item:数组中的每一项【可命名
index:下标=值
arr:原数组
in:遍历
<ul>
<li v-for="item in arr">{{item}}</li>
<li v-for="item of arr">{{item}}</li>
<li v-for="(item,idx) of arr" :key="idx">{{item}}——{{idx}}</li>
<!-- 遍历对象 -->
<li v-for="(item,idx) of user" :key="idx">{{item}}——{{idx}}</li>
</ul>
const vm = new Vue({
el: '#root',
data() {
return {
arr: ['团子', '帅哥', '美女'],
user: {
name: '团子',
sex: '女',
job: '程序员'
},
methods: {
}
});
5、v-on和自定义指令
v-on给一个元素绑定一个/多个时间:事件名
事件的基本使用:
1.使用v-on :xxx或xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
5.@click="demo”和 @click="demo($event)”效果一致,但后者可以传参;
<!-- v-on:方法名【绑定事件】绑定点击事件简写=@click -->
<button v-on:click="big">变大</button>
<button @click="small">变小</button>
methods: {
// big: function () { },//不推荐,太繁琐
// big:()=>{},//箭头函数不可以,this指向的widow
big() {
// this.imgHeight += 100
// this.imgWidth += 100
if (this.imgWidth >= 800) {
alert('到极限了!')
} else {
this.imgHeight += 100
this.imgWidth += 100
}
},
small() {
if (this.imgWidth <= 200) {
alert('不能再小了!')
}
this.imgWidth -= 100
this.imgHeight -= 100
}
v-on传参测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 加不加括号不会产生影响 -->
<button @click="change">不加括号</button>
<button @click="change()">加括号</button>
<!-- 传参 -->
<button @click="ha(123,$event)">传参:参数</button>
<button @click="ha()">不传:event对象</button>
<button @click="ha($event)">加括号不传:undefined</button>
<!-- 事件修饰符
.stop:阻止事件冒泡
.prevent:组织默认事件
.capture:添加事件捕获,哪一个元素添加了他,就会先执行,剩余的照常执行
-->
<div @click="stopWai">
<div @click.stop="stopLi">
<div @click.capture="stopLi1">
<div @click.stop="stopLi2">哈哈哈</div>
</div>
</div>
</div>
<a href="http://www.baidu.com">去官网</a>
<a href.prevent="http://www.baidu.com">哪里都不去</a>
</div>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: '#root',
data() {
return {
}
},
methods: {
change() {
console.log(1);
},
ha(val, event) {
console.log(val, event);
},
stopWai() {
console.log('我是外部事件');
},
stopLi() {
console.log('我是里面的事件');
},
stopLi1() {
console.log('我是2事件');
},
stopLi2() {
console.log('我是3事件');
}
}
});
</script>
</body>
</html>