Vue(二)基础
01-vue的起步
1.引包
a) 直接下载，并用<script>标签引入
b) CDN方式引入：
<script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script>
c) npm install vue 2. 创建实例化对象：
new Vue({
el:'#app', //目的地
data:{
//数据属性
//数据驱动视图
msg: 'hello vue',
} 3. {{ }} 模板语法插值
1.1 安装node
官网：https://nodejs.org/en/ 下载 安装
# 检查node版本
node -v
下载完node 自带包管理器 npm
1.2 使用npm
第一步：初始化npm项目, 生成package.json文件
npm init 第二步：下载vue，--save 指的是 把vue下载到当前的项目里
npm install vue --save
1.3 引用和双大括号插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语法{{}} 主要的作用是 插值-->
<h3>{{ msg }}</h3>
<!--支持字符拼接-->
<h3>{{ msg+'hello' }}</h3>
<!--支持三元运算-->
<h3>{{ 1<?'真的':'假的' }}</h3>
<!--可以插入字符串-->
<h2>{{'hyp'}}</h2>
<!-- 不能使用if-else -->
</div> <!--1.引包-->
<script type="javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="javascript">
//2.创建vue实例化对象
// el: 当前实例化对象绑定的根元素
// data: 数据，可以是个对象、也可以是个函数
new Vue({
el:'#app', //目的地
data:{
//数据属性
//数据驱动视图
msg: 'hello vue',
a:20
} });
// app.a = 20;
console.log(app);
// 在vue实例化之后，这个对象中属性的 前面会有 $,主要跟自己定义的属性区分。
console.log(app.$el === document.getElementById('app')); </script> </body>
</html>
index.html
1.4 package.json
02-指令系统
1. v-text和v-html
v-text：在元素中插值
v-html：在元素中不仅可以插值，还可以插入标签
v-text：等价于 {{}} 实现原理：innerText
v-html：实现原理：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<h2>{{msg}}</h2>--> </div> <!--在pycharm中，引入本地的vue.js，会报错，显示没引进来，因此以cdn的方式引入，就没问题了！-->
<!--<script type="javascript" src="./node_modules/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript"> new Vue({
el:'#app',
//data(){}
data: {
msg:'hello指令系统',
msg2:'<a href="#">这是我的数据</a>', },
//template 的绑定优先级 大于 el的优先级
template:
`
<div>
<h3>{{msg}}</h3>
<h2 v-text="msg"></h2>
<h2 v-text="msg2"></h2>
<h2 v-html="msg2"></h2>
</div>
`, })
</script>
</body>
</html>
v-ext和v-html
2. v-if和v-show
v-if 和 v-else：根据表达式的真价值来动态插入和移除元素 v-show：根据表达式的真假值来显示和隐藏元素
v-if VS v-show: v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app"> <h1>{{ msg }}</h1>
<!-- v-if和v-on 来实现页面中DOM的创建和销毁 -->
<!--<div class="box" v-on:click="showHanlder" v-if="isShow"></div>--> <div class="box" v-if="isShow"></div>
<button v-on:click="showHanlder">{{btnText}}</button>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript"> new Vue({
el: "#app",
template: ``,
// data 在vue实例化中可以是一个对象，也可以是一个函数，
// 但是在组件中，data 必须是一个函数，函数的内容一定是一个 return 一个对象
// 数据驱动视图
data: function () {
return {
msg: '事件处理',
count: 0,
isShow: true,
btnText: '隐藏',
}
},
// 在vue中所有的事件都声明在methods
methods:{
showHanlder(){
//this.isShow = false; // if(this.isShow){
// this.isShow = false;
// this.btnText = '显示'
// }else {
// this.isShow = true;
// this.btnText = '隐藏'
// } this.isShow = !this.isShow
}
}
}) </script>
</body>
</html>
v-if 和 v-on
3. v-for
v-for：根据变量的值来循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div id="app">
<ul>
<li v-for="item in nameList"><h2>序号：{{item.id}}; 名字：{{item.name}}</h2></li>
</ul>
</div> <!--在pycharm中，引入本地的vue.js，会报错，显示没引进来，因此以cdn的方式引入，就没问题了！-->
<!--<script type="javascript" src="./node_modules/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript"> new Vue({
el: '#app',
data: {
isShow: true,
nameList:[
{id:1, name:'hyp'},
{id:2, name:'lcy'},
{id:3, name:'nmp'}
]
}, })
</script>
</body>
</html>
v-for
4. v-bind
v-bind：绑定标签的属性并执行相应的操作，所有的属性都可以绑定，
注意：只要使用了v-bind后面的字符串一定是数据属性data里面的值，否则会报错！
v-bind:class='{}|[]|变量名|常量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.wrap{
width: 100px;
height: 100px;
background-color: red;
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" v-bind:class="{active:isGreen}">
<a v-bind:href="href">vue.js</a>
</div>
</div>
<!--在pycharm中，引入本地的vue.js，会报错，显示没引进来，因此以cdn的方式引入，就没问题了！-->
<!--<script type="javascript" src="./node_modules/vue/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript"> new Vue({
el: '#app',
template:'',
data: {
isShow: true,
nameList:[
{id:1, name:'hyp'},
{id:2, name:'lcy'},
{id:3, name:'nmp'}
],
isGreen: true,
href:"https://cn.vuejs.org/v2/guide/"
}, })
</script>
</body>
</html>
v-bind
03-事件
1. v-on
vue中使用v-on:click 对当前的DOM绑定click事件 注意：所有的原生js事件使用 v-on 都可以绑定
2. v-model
// v-model: 它能轻松实现表单输入和应用状态之间的双向绑定。 html:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div> js:
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
04-组件
4.1 局部组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
color: #fff;
}
.main{
width: 100%;
}
.head{
width: 100%;
height: 70px;
background-color: purple;
text-align: center; font-size: 20px;
line-height: 70px;
}
.wrap{
width: 100%;
height: 1200px; }
.wrap .aside{
width: 30%;
height: 1200px;
background-color: green;
float: left;
}
.wrap .content{
width: 70%;
height:1200px;
background-color:yellow;
float: left;
}
</style>
</head>
<body>
<div id="app"> </div>
<!--<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript"> // 打油诗: 先声子 挂子 用子
// 2.先声明头部组件
var Vheader = {
template:`
<header class='head'>
我是头部
<span>{{count}}</span>
<button @click = 'count+=1'>点击</button>
</header>
`,
data(){
return {
count: 0
}
},
methods:{ }
}; var Vaside = {
template:`
<div class='aside'>
我是侧边栏
</div>
`
};
var Vcontent = {
template:`
<div class='content'>
我是内容区域
</div>
`
}; // 1.声明入口组件 /*
1.头部组件
2.侧边栏
3.内容组件
4.脚部组件 */ // 1. 声明入口组件 局部组件 我是入口组件
var Vmain = {
template:`
<div class='main'>
<Vheader></Vheader>
<div class='wrap'>
<Vaside />
<Vcontent />
</div>
</div> `,
components:{
// 等价于Vheader:Vheader 2.1 挂载子
Vheader,
Vaside,
Vcontent,
}
}; new Vue({
el:"#app",
// 1.3 使用子组件
template:`<Vmain />`, //入口组件
data:{ },
components:{
// 1.2 挂载子组件 key表示组件名 value:组件对象
Vmain:Vmain
}
});
</script> </body>
</html>
组件的使用
4.2 父组件通过Prop向子组件传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
color: #fff;
}
.main{
width: 100%;
}
.head{
width: 100%;
height: 70px;
background-color: purple;
text-align: center; font-size: 20px;
line-height: 70px;
}
.wrap{
width: 100%;
height: 1200px; }
.wrap .aside{
width: 30%;
height: 1200px;
background-color: green;
float: left;
}
.wrap .content{
width: 70%;
height:1200px;
background-color:yellow;
float: left;
}
</style>
</head>
<body>
<div id="app"> </div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script> <script type="text/javascript"> // 打油诗: 先声子 挂子 用子
// 1.先声明头部组件
var Vheader = {
template:`
<header class='head'>
<span>{{title}}</span>
<span>{{count}}</span>
<button @click = 'count+=1'>点击</button>
</header>
`,
data(){
return {
count: 0
}
},
props:['title'],
methods:{ }
}; var Vaside = {
template:`
<div class='aside'>
我是侧边栏
</div>
`
};
var Vcontent = {
template:`
<div class='content'>
<ul>
<li v-for = 'post in posts' :key = 'post.id'>
<h3>我的博客标题:{{post.title}}</h3>
<p>我的博客内容:{{post.content}}</p>
</li>
</ul>
<button @click='changeSize'>改变字体大小</button>
</div>
`,
props: ['posts'],
methods:{
changeSize(){
// 通过$emit()方法来触发自定义的事件
// 第一个参数是自定义的事件名字 第二个参数就是传递的值
// this指的vue实例化对象的子类
this.$emit('postChangeSize',3)
}
}
}; var Vmain = {
data(){
return{
fontsize:18
}
},
template:`
<div class='main' :style = '{fontSize:fontsize+"px"}'> <Vheader v-bind:title = 'title'></Vheader>
<div class='wrap'>
<Vaside />
<Vcontent v-bind:posts = "appPosts" @postChangeSize = 'clickHandler'/>
</div>
</div> `,
methods:{
clickHandler(value){
this.fontsize = this.fontsize+value;
}
},
components:{
// 等价于Vheader:Vheader 2.挂载子
Vheader,
Vaside,
Vcontent
},
props:['title','appPosts']
}; new Vue({
el:"#app",
// 3.使用子组件
template:`<Vmain :title = "text" :appPosts = "posts"/>`,
data:{
text:"我是一个标题",
posts:[
{id:1,title:"组件中的传值",content:"通过Prop传递数据"},
{id:2,title:"组件中的传值2",content:"通过Prop传递数据2"},
{id:3,title:"组件中的传值3",content:"通过Prop传递数据3"},
] },
components:{
// 2.挂载子组件 key表示组件名 value:组件对象
Vmain:Vmain
}
});
</script> </body>
</html>
通过Prop向子组件传递数据
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
new Vue({
el:"#app",
// 3.使用子组件
template:`<Vmain :title = "text" :appPosts = "posts"/>`,
data:{
text:"我是一个标题",
posts:[
{id:1,title:"组件中的传值",content:"通过Prop传递数据"},
{id:2,title:"组件中的传值2",content:"通过Prop传递数据2"},
{id:3,title:"组件中的传值3",content:"通过Prop传递数据3"},
]
},
components:{
// 2.挂载子组件 key表示组件名 value:组件对象
Vmain:Vmain
}
});
// 入口组件 Vmain
var Vmain = {
data(){
return{
fontsize:18
}
},
template:`
<div class='main' :style = '{fontSize:fontsize+"px"}'>
<Vheader v-bind:title = 'title'></Vheader>
<div class='wrap'>
<Vaside />
<Vcontent v-bind:posts = "appPosts" @postChangeSize = 'clickHandler'/>
</div>
</div>
`,
methods:{
clickHandler(value){
this.fontsize = this.fontsize+value;
}
},
components:{
// 等价于Vheader:Vheader 2.挂载子
Vheader,
Vaside,
Vcontent
},
props:['title','appPosts']
};
// 子组件 Vheader
var Vheader = {
template:`
<header class='head'>
<span>{{title}}</span>
</header>
`,
data(){
return {
}
},
props:['title'],
methods:{
}
};
// 子组件 Vcontent
var Vcontent = {
template:`
<div class='content'>
<ul>
<li v-for = 'post in posts' :key = 'post.id'>
<h3>我的博客标题:{{post.title}}</h3>
<p>我的博客内容:{{post.content}}</p>
</li>
</ul>
</div>
`,
props: ['posts'],
methods:{
changeSize(){
// 通过$emit()方法来触发自定义的事件
// 第一个参数是自定义的事件名字 第二个参数就是传递的值
// this指的vue实例化对象的子类
this.$emit('postChangeSize',3)
}
}
};
4.3 公共组件的创建
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} #head {
width: 100%;
height: 80px;
background-color: purple;
} .defalut {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
/*border-color: #dcdfe6;*/
color: #606266;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
} .primary {
color: #fff;
background-color: #409eff;
border-color: #409eff
} .success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
</style>
</head> <body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
// 创建公共组件
// 第一个参数是公共组件的名字，第二个参数options
Vue.component('Vbtn', {
template: `<button class='defalut' :class='type'>
<slot></slot>
</button>`,
props: ['type']
}); var Vheader = {
data() {
return { }
},
template: `<div id='head'>
<Vbtn>登录</Vbtn>
<Vbtn>注册</Vbtn>
<Vbtn>提交</Vbtn>
<Vbtn>默认的按钮</Vbtn>
<Vbtn type='primary'>主要的按钮</Vbtn>
<Vbtn type='success' >成功的按钮</Vbtn>
</div>`
}; // 局部组件的使用
var App = {
template: `<div>
<Vheader></Vheader>
</div>`,
components: {
Vheader
}
}; new Vue({
el: '#app',
data() { },
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
公共组件
4.4 内置组件—过滤slot
05-过滤器
5.1 全局过滤器和局部过滤器
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style> </style>
</head> <body>
<div id="app">
<input type="text" v-model = 'price'>
<h3>{{ price | currentPrice}}</h3>
<h4>{{msg | reverse}}</h4>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript"> // 注册全局的过滤器
Vue.filter('reverse',function(value) { return value.split('').reverse().join('');
}); new Vue({
el: '#app',
data() {
return{
price:0,
msg:"hello luffy"
}
},
// 局部过滤器 在当前 组件中声明过滤器
filters:{
currentPrice:function (value) {
// 参数1就是纯涤的元数据
console.log(value);
return '$' + value;
}
}
});
</script>
</body> </html>
5.2 侦听属性之watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model='myName'>
<h3>{{ myName}}</h3>
<button @click='clickHandler'>修改</button>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:``,
data(){
return {
myName:'',
firtName:'wusir'
}
},
methods:{
clickHandler(){
this.myName = 'alex';
}
},
watch:{
// 检测单个属性 命令式
myName:function(value) {
console.log(value);
if (value === 'alex') {
console.log(value +' '+this.firtName+'是sb')
}
}
}
});
</script> </body>
</html>
watch
06-计算属性
6.1 computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h4>{{alexDesc}}</h4>
<button @click='clickHandler'>修改</button>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:``,
data(){
return {
myName:'alex',
age:18
}
},
methods:{
clickHandler(){
this.myName = 'WUSIR';
this.age = 28;
}
},
computed:{
alexDesc:function() {
var str = `${this.myName}它的年龄是${this.age}岁了可以去大保健`; // 默认只有getter
return str;
}
}
});
</script> </body>
</html>
computed
6.2 setter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h4>{{alexDesc}}</h4>
<button @click='clickHandler'>修改</button>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:``,
data(){
return {
myName:'alex',
age:18
}
},
methods:{
clickHandler(){
console.log(this.alexDesc);
this.alexDesc = 'ALEX is SB!!!';
}
},
computed:{
alexDesc:{
set:function(newValue) {
console.log(newValue);
this.myName = newValue;
},
get:function() {
var str = `${this.myName}它的年龄是${this.age}岁了可以去大保健`; // 默认只有getter
return str;
}
}
}
});
</script> </body>
</html>
setter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model = 'alexDesc'>
<h4>{{alexDesc}}</h4>
<!-- <button @click='clickHandler'>修改</button> -->
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
template:``,
data(){
return {
myName:'', }
},
computed:{
alexDesc:{
set:function(newValue) { this.myName = newValue;
},
get:function() {
return this.myName;
}
}
}
});
</script> </body>
</html>
setter的用途
07-生命周期的钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
// 钩子函数
// beforeCreate
// created
// beforeMount
// mounted
// beforeUpdate
// updated
// activated
// deactivated
// beforeDestroy
// destroyed
// 创建 销毁 var Test = {
data(){
return{
msg:"哈哈哈"
}
},
template:`
<div>
<div>{{msg}}</div>
<button @click = 'changeHandler'>修改</button>
</div>
`,
methods:{
changeHandler(){
this.msg = this.msg + 'alex'
}
},
beforeCreate(){
// 组件创建之前
console.log(this.msg);
},
created(){
// 组件创建之后
// 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响 应用：发送ajax请求
console.log(this.msg);
// this.msg = '嘿嘿黑';
},
beforeMount(){
// 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted(){
// 这个地方可以操作DOM
// 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
console.log(document.getElementById('app'));
},
beforeUpdate(){
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated(){
// 在更新之前，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了'); }
}; var App = {
data(){
return {
isShow : true
}
},
template:`
<div>
<keep-alive>
<Test v-if = 'isShow'></Test>
</keep-alive> <button @click = 'changeHandler'>改变组件的生死</button>
</div>
`,
methods:{
changeHandler(){
this.isShow = !this.isShow;
}
},
components:{
Test
}
};
new Vue({
el:'#app',
template:``,
components:{
App
}
}); </script> </body>
</html>
钩子函数
08-$ref和$nextTick
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript"> Vue.component('subComp',{
template:`<div></div>`
}); var App = {
template: `<div>
<subComp ref = 'subc'></subComp>
<button ref = 'btn'>我是按钮</button>
<p ref = 'sb'>alex</p>
</div>`,
beforeCreate() {
console.log(this.$refs.btn);//undefined
},
created() {
console.log(this.$refs.btn);//undefined
},
beforeMount() {
console.log(this.$refs.btn); //undefined
},
mounted() {
console.log(this);
console.log(this.$refs.btn);
// 如果是给组件绑定的ref = 'subc'属性那么this.$refs.subc取到的是组件对象
console.log(this.$refs.subc); var op = this.$refs.sb;
this.$refs.btn.onclick = function() {
console.log(op.innerHTML); }
}
}; new Vue({
el: '#app',
data() {
return { }
},
template: `<App />`,
components: {
App
}
});
</script>
</body>
获取DOM元素
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript"> var App = {
data(){
return{
isShow:false
}
},
template: `<div>
<input type="text" v-if='isShow' ref = 'fos'/>
</div>`,
mounted() {
// vue实现响应式并不是数据发生变化之后DOM立刻发生变化，而是按一定的策略进行DOM的更新 // $nextTick 是在下次Dom更新循环结束之后执行的延迟回调，在修改数据之后使用$nextTick ，则可以在回调中获取更新之后的DOM
this.isShow = true; this.isShow = false;
this.isShow = true;
console.log( this.$refs.fos);
// focus()
this.$nextTick(function() {
// 获取更新之后的DOM
this.$refs.fos.focus()
}); }
}; new Vue({
el: '#app',
data() {
return { }
},
template: `<App />`,
components: {
App
}
});
</script>
</body> </html>
给DOM元素添加特殊情况
09-vue-router的使用
Vue(二)基础的更多相关文章
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- 一个综合实例讲解vue的基础知识点。
本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- Vue入门基础（火柴）
前言 由于个人十分欣赏博友——小火柴的蓝色理想,他的博文我看了大多数,觉得十分的精彩,然而很多都是看后即忘.我想除了没有经常动手敲代码,更可能是在看的时候忽略了很多细节,因此打算把他的博文通通给“抄袭 ...
- 「kuangbin带你飞」专题十二 基础DP
layout: post title: 「kuangbin带你飞」专题十二 基础DP author: "luowentaoaa" catalog: true tags: mathj ...
随机推荐
- MS SQL批量生成作业脚本方法介绍总结
在迁移或升级SQL Server数据库服务器时,很多场景下我们不能还原msdb,所以我们必须手工迁移SQL Server相关作业.如果手工生成每一个作业的脚本话,费时又费力,其实SQL Server中 ...
- java----鲁棒性
所谓“鲁棒性”,是指控制系统在一定(结构,大小)的参数摄动下,维持其它某些性能的特性. Java鲁棒性的特点如下: Java在编译和运行程序时都要对可能出现的问题进行检查,以防止错误的产生. Java ...
- spring4笔记----spring生命周期属性
init-method : 指定bean的初始化方法-spring容器会在bean的依赖关系注入完成后调用该方法 destroy-method :指定bean销毁之前的方法-spring容器将会在销毁 ...
- shell编程-test命令（七）
test命令常用作检查某些条件是否成立. 数值测试 -eq:检测两个数是否相等,相等返回true -ne:检测两个数是否相等,不相等返回true -gt:检测左边的数是否大于右边,是则返回true - ...
- c/c++ vector，map，set，智能指针，综合运用的小例子
标准库,智能指针,综合运用的小例子 功能说明:查询单词在文件中出现的次数,如果在同一行出现多次,只算一次. 比如查询单词:你好 输出的结果: 你好 出现了:2次 (行号 2)xxxxxxx 你好 (行 ...
- c/c++ 数组 数组的引用，指针数组的引用
c/c++ 数组 知识点 1,数组的声明和初始化,对应代码里的test1和test2 2,char数组,对应代码里的test3 3,数组不可以拷贝和复制,对应代码里的test4 4,指针数组, 数组的 ...
- 用好lua+unity，让性能飞起来——lua与c#交互篇
前言 在看了uwa之前发布的<Unity项目常见Lua解决方案性能比较>,决定动手写一篇关于lua+unity方案的性能优化文. 整合lua是目前最强大的unity热更新方案,毕竟这是唯一 ...
- 利用Python通过频谱分析和KNN完成iphone拨号的语音识别
最近这段时间,学校里的事情实在太多了,从七月下旬一直到八月底实验室里基本天天十二点或者通宵,实在是没有精力和时间来写博客.这周老师出国开会,也算有了一个短暂的休息机会,刚好写点有意思的东西. 上周在天 ...
- windows入侵
一, ping 用来检查网 络是否通畅或者网络连接速度的命令.作为一个生 活在网络上的管理员或者黑 客来说, ping 命令是第一个必须掌握的 DOS 命令,所利用的原理是这样的网络上的机器都有唯一确 ...
- tomcat启动超过时间
Server Tomcat v9.0 Server at localhost was unable to start within 45 seconds. 运行超时 最近我切换了JDK版本之后,将10 ...