-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="item"
:content="item"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
// var TodoItem={
// template:'<li>item</li>'
// }
new Vue({
el:"#root",
data:{
inputValue:"hello",
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue="";
}
}
})
</script>
</body>
</html>
查看全部 -
v-if和v-show，v-if为false时直接删除标签，v-show为false时隐藏
v-for循环显示数据
查看全部 -
侦听器：watch，侦听变量的变化
查看全部 -
计算属性：computed，是一个函数
查看全部 -
属性绑定
v-bind=: 输入框和标签双向绑定 v-model
查看全部 -
v-text
v-html
v-on:click=@click
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<p v-show="show">hello lily!</p>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick: function(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>
查看全部 -
2-6 v-if，v-show，v-for指令
v-if指令、v-show指令都是通过true和false来判断是否对元素进行显示。
v-if和v-show的区别：
当他们对应的数据项的值为false时，“v-if”会使他所在的标签在DOM中移除，“v-show”会使他所在标签添加一个“display:none;”隐藏的属性。
查看全部 -
computed(计算属性值)
watch(侦听器)侦听属性当某个属性值发生改变那该侦听器的值也发生改变
查看全部 -
v-on:click查看全部 -
局部组件
“<style scoped>”样式表添加了一个作用域，使只有这个组件会应用这个样式。
当没有这个作用域时，会使这里的样式表为全局样式。
查看全部 -
引入Vue组件文件：
import 要调用的组件名称 from '文件路径'
在Vue组件文件中，
模板<template>下只能有一个根标签！
引入局部组件后，需要在components中声明。
局部组件中，props中存放的是父级给子级传值得项。
区别：
data
//此处是对象 data: {}//此处为函数。return里是存放的数据 data: function(){ return {} } //ES6中可以简写为： data (){ return {} }查看全部 -
父组件向子组件传值，通过属性来传递。
子组件向父组件传递动作，通过子组件发布自定义的事件、父组件订阅监听这个事件，
所以子组件就可以通过 发布定位 的方式来传递数据了。
//此自定义事件‘delete’包含一个参数index this.$emit('delete', this.index)当子组件触发后需要父组件进行操作时，子组件先触发，父组件再监听、才执行。父组件监听到子组件传递给他的“触发”事件，对父组件里的数据进行对应操作。
注：
组件中，props可以是数组。
查看全部 -
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="xh_ul">
<form action="">
<div class="f_input"><span>搜索</span><input type="text" id="f_name" v-model="inputValue"></div>
<input type="button" value="搜一下" @click="handleSubmit">
</form>
<h3>搜索记录</h3>
<ul>
<!-- 传递list到item，再将item传到content -->
<zj-name
v-for="(item, index) of list"
:key="index"
:content="item"
>
</zj-name>
</ul>
</div>
<script>
//定义一个全局组件
//通过props接受内容
//template 模板
Vue.component('zj-name',{
props:['content'],
template:'<li>{{ content }}</li>'
})
//定义一个Vue实例
new Vue({
el:'#xh_ul',
data:{
inputValue: '',//若在页面中改变了inputValue，则此处的值也会进行改变
list: []
},
methods:{
handleSubmit: function(){
//将inputValue的值添加到list里
this.list.push(this.inputValue)
//加入后，使inputValue的值为空
this.inputValue = ""
}
}
})
</script>
<script>
$('.f_input input').click(function(oEvent) {
$(this).stop(true,true).toggleClass('move');
$(this).siblings('span').stop(true,true).toggleClass('move');
oEvent.stopPropagation();
});
$('body').click(function(){
$('.f_input input').stop(true,true).removeClass('move');
$('.f_input span').stop(true,true).removeClass('move');
});
</script>
<style>
.f_input{
margin: 10px 0;
position: relative;
display: inline-block;
border-radius: 20px;
border:1px solid #000;
}
.f_input span{
display: inline-block;
position: absolute;
left:5px;
top:50%;
transform: translateY(-50%);
}
input{
display: block;
padding: 0 15px;
width: 220px;
border:none;
border-radius: 20px;
line-height: 40px;
height: 40px;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline:none;/*去除蓝色边框*/
}
.f_input input{
padding-left: 40px;
transition: all .3s;
}
.f_input input.move{
padding-left: 15px;
}
.f_input span{
background-color: #fff;
transition: all .3s;
}
.f_input span.move{
top: 0;
transform: translateY(-80%);
font-size: 16px;
text-shadow: 1px 2px 3px rgb(0,0,0);
}
input[type="submit"],input[type="button"]{
padding: 0;
font-size: 18px;
background-color: #000;
color: #fff;
border:1px solid #000;
}
</style>
查看全部 -
＜div id=root 挂载点>＜/div> el :#root 绑定查看全部
举报