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 ...
随机推荐
- selenium RC 环境配置
摘自http://www.cnblogs.com/sanzangTst/p/7452922.html 收藏学习 学习selenium python需要的工具: 1.浏览器 2.Python 3.Sel ...
- Scrapy （网络爬虫框架）入门
一.Scrapy 简介: Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,Scrapy 使用了 Twisted['twɪstɪd](其主要对手是Tornado) ...
- 英语进阶系列-A03-英语升级练习一
古诗背诵 要求:根据诗句,先翻译成现代文,然后绘制图像. 词汇系列 要求:认真朗读单词,然后通过该单词联想2个词汇,然后给每个单词造句. 例子:class班级,联想到了classroom教室,clas ...
- WebAPI HelpPage支持Area
WebAPI原生的HelpPage文档并不支持Area的生成,需进行如下改造: WebApiConfig: public static class WebApiConfig { public stat ...
- python 线程队列、线程池、全局解释器锁GIL
一.线程队列 队列特性:取一个值少一个,只能取一次,没有值的时候会阻塞,队列满了,也会阻塞 queue队列 :使用import queue,用法与进程Queue一样 queue is especial ...
- 【Linux基础】VI命令模式下删除拷贝与粘贴
在VI命令模式下:y 表示拷贝, d 表示删除,p标识粘贴 1.删除 dw 表示删除从当前光标到光标所在单词结尾的内容. d0 表示删除从当前光标到光标所在行首的内容. d$ 表示删除从当前光标到光标 ...
- Scrapy 框架 安装 五大核心组件 settings 配置 管道存储
scrapy 框架的使用 博客: https://www.cnblogs.com/bobo-zhang/p/10561617.html 安装: pip install wheel 下载 Twisted ...
- Error response from daemon: --cluster-store and --cluster-advertise daemon configurations are incompatible with swarm mode
将docker worker node加入swarm集群时,出现以下错误 1.试验环境: centos7 2.报错翻译:--cluster-store和--cluster-advertise后台配置与 ...
- centos7下安装docker（18docker日志---docker logs）
在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要,考虑到容器的短暂和不固定周期,当我们需要排查问题的时候容器可能不在了.因此,一套集中式的日志管理系统是生产环境中不 ...
- 如何在tomcat前部署一个nginx
在tomcat应用已经发布后,如何在tomcat前部署一个nginx,可以正常访问jsp,静态资源(html,css,js) 这里tomcat的端口号是8888 upstream morris { s ...