表单绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" name="username" v-model.lazy.trim="name" value="" />
<p>{{name}}</p>
<textarea rows="3" cols="20" v-model="uname"></textarea>
<p>{{uname}}</p>
<span v-for="item in phone" >
{{item}}
<input type="checkbox" name="phone" id="" :value="item" v-model="checkPhone" />
</span>
<p>{{checkPhone}}</p>
<select v-model="choose">
<option :value ="item" v-for="item in city" >{{item}}</option>
</select>
<p>{{choose}}</p>
<!-- 转换为字符串-->
<input type="text" name="age" v-model.number="age" value=""/>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
name:"陈超",
uname: "海",
phone:['华为','OPPO','苹果'],
checkPhone: [],
city:['南京','上海','北京'],
choose:"",
age: 18
},
watch:{
age:function(val)
{
console.log(val)
}
}
})
</script>
</body>
</html>
模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3> {{msg}}</h3>
<!-- 一次性插入，不再修改 -->
<h3 v-once>{{msg}}</h3>
<h3>{{htmlMsg}}</h3>
<h3 v-html="htmlMsg"></h3>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:
{
msg: "chenchao",
htmlMsg:'<span>hello</span>'
}
})
</script>
</body>
</html>
插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- <input-com :username="username" @child-input='changeEvent' ></input-com>
<h3>{{username}}</h3> -->
<input type="text" v-model="username"/>
<h3>{{username}}</h3>
</div>
<!-- <input type="text" name="" id="username" value="" /> -->
<!-- <input type="text" @input="username = $event.target.value" name="" id="" value=""/> -->
<script type="text/javascript">
Vue.component("input-com",{
props:['username'],
// template:`<input type="text" :value="username" @input="$emit( 'child-input' , $event.target.value)"/>`
template:`<input type="text" :value="username" />`
})
// 监听
// let inputdom=document.querySelector("#username")
// inputdom.oninput=function()
// {
// document.querySelector("h3").innerHTML=inputdom.value
// }
let app=new Vue({
el:"#app",
data:{
username:""
},methods:{
changeEvent:function(data){
this.username=data
}
}
})
</script>
</body>
</html>
插槽解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- <demo :html='content'></demo> -->
<demo1><p>helloworld</p></demo1>
</div>
<script type="text/javascript">
// Vue.component("demo",{
// props:['html'],
// template:`<div class="input-al">
// <h1>温馨提示</h1>
// <div class="content">
// {{html}}
// </div>
// </div>`
// })
Vue.component("demo1",{
template:`<div class="input-al">
<h1>温馨提示</h1>
<div class="content">
<slot></slot>
</div>
</div>`
})
let app=new Vue({
el:"#app",
data:{
content:"小心熊出没"
}
})
</script>
</body>
</html>
过度动画
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<style type="text/css">
.context{
width: 100px;
height:100px;
background-color: #00FFFF;
margin-top: 100px;
margin-left: 100px;
}
/* .fade-enter-active, .fade-leave-active {
transition: opacity 5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
} */
.fade-enter-active, .fade-leave-active {
transition: transform 5s;
}
.fade-enter, .fade-leave-to {
transform: translateX(250px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade" enter-active-class="animated bounceOutUp" leave-active-class=" animated fadeOutRightBig" >
<div class="context" v-if="isShow">
</div>
</transition>
<button type="button" @click="enterEvent">点击</button>
</div>
<script type="text/javascript">
let app=new Vue({
el: "#app",
data:{
isShow:true
},
methods:{
enterEvent:function()
{
this.isShow=!this.isShow
}
}
})
</script>
</body>
</html>计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{fistname+lastname}}</p>
<p>{{fullname}}</p>
<!-- 逆序显示字符串 -->
<p>{{word.split("").reverse().join("")}}</p>
<p>{{reverseword}}</p>
</div>
<script type="text/javascript">
let app=new Vue({
el: "#app",
data:{
fistname: "张",
lastname: "三",
word: "music"
},
// 计算属性
computed:{
fullname: function()
{
console.log(this)
return this.fistname+this.lastname
},
reverseword:function()
{
return this.word.split("").reverse().join("")
}
}
})
</script>
</body>
</html>
简化版属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 父传子 -->
<div id="app">
<ol>
<schoollist v-for="item in school" :local="item" ></schoollist>
</ol>
</div>
<script type="text/javascript">
Vue.component("schoollist",{
props:['local'],
template:`<li >
<p>地点：{{local}}</p>
</li>`
})
let app=new Vue({
el:"#app",
data:{
school:['上海','安徽','浙江']
},
})
</script>
</body>
</html>
实例化样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" >
<div :style="objStyle" ></div>
</div>
<script type="text/javascript">
let app=new Vue({
el: "#app",
data:{
objStyle:{
width: "200px",
height: "200px",
'background-color': "#00FFFF"
}
}
})
</script>
</body>
</html>
生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 :class="className">类名绑定</h1>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
msg: "helloVue",
className: "redBg"
},
beforeCreate() {
console.log('beforeCreate')
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
let dom = document.querySelector(".redBg")
console.log(dom)
},
mounted() {
console.log('mounted')
},
methods: {
clickEvent: function() {
}
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
}
})
</script>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p2>{{count}}</p2>
<br />
<button type="button" @click="count+=1">点击</button>
<button type="button" @click="add">点我</button>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
count: 0
},
methods:{
add:function(e){
console.log(e),
console.log(this)
this.count++
}
}
})
</script>
</body>
</html>
事例组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ol>
<product-com v-for="item,index in product" :pro="item"></product-com>
</ol>
</div>
<script type="text/javascript">
Vue.component('product-com', {
props: ['pro'],
template: `<li >
<p>姓名：{{pro.name}}</p>
<p>年龄：{{pro.age}}</p>
<p>类型：{{pro.location}}</p>
</li>`,
})
let app = new Vue({
el: "#app",
data: {
product: [{
name: '詹姆斯',
age: 36,
location: '小前锋'
},
{
name: '哈登',
age: 29,
location: '后卫'
},
{
name: '奥尼尔',
age: 40,
location: '中锋'
}
]
}
})
</script>
</body>
</html>
修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
<input type="text" name="username" id="" v-model="city" value="" />
<input @click.prevent="tijiao" type="submit" value="提交" />
</form>
<!-- <button @click.prevent="tijiao" type="submit" value="提交">提交</button> -->
<button type="button" @click.ctrl="evet">按住</button>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
city: '舒城'
},
methods: {
tijiao: async function() {
console.log("提交")
console.log(this.city)
//let httpUrl =
//`https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=3c497450d8e44c5280421ceaba1db581`
let httpUrl=`https://devapi.qweather.com/v7/weather/now?location=${this.city}&key=
b6b9603891c34dc58f55fc31618dc7e3`
let res = await fetch(httpUrl)
let result = await res.json()
console.log(result)
},
evet: function()
{
console.log('evet')
}
}
})
</script>
</body>
</html>
样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.active{
width: 200px;
height: 200px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active:isShow}"></div>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
isShow: true
}
})
</script>
</body>
</html>
侦听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data:{
msg: "chenchao"
},
watch:{
msg:(val)=>{
console.log("监听事件")
console.log(val)
}
}
})
</script>
</body>
</html>
组件字传父
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<!-- <schoollist v-for="item,index in school" @clocal="chooseeve" :key="'abc'+index" :index="index" :local="item" ></schoollist> -->
<schoollist v-for="item,index in school" :action="chooseeve" :key="'abc'+index" :index="index" :local="item" ></schoollist>
</ul>
<p>选中的地区是:{{chooselocal}}</p>
</div>
<script type="text/javascript">
Vue.component("schoollist",{
props:['local','index','action'],
template:`<li >
<p>{{index}} 地点：{{local}}</p>
<button @click="enterEve(local)">选择</button>
<button @click="$parent.chooseeve(local)">选择</button>
<button @click="$parent.chooselocal=local">选择</button>
</li>`,
methods:{
enterEve:function(local){
console.log(local)
//this.$emit('clocal',local)
//this.$parent.chooseeve(local)
}
}
})
let app=new Vue({
el:"#app",
data:{
school:['上海','安徽','浙江'],
chooselocal:""
},
methods:{
chooseeve:function(data)
{
console.log("触发")
//this.chooselocal=data
}
}
})
</script>
</body>
</html>
组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<hello-com></hello-com>
</div>
<script type="text/javascript">
let hellocom = Vue.component("hello-com", {
template: '<div><h1>{{chen}}</h1><button @click="event">修改数据</button></div>',
data: function() {
return {
chen: "hello chen"
}
},
methods: {
event: function() {
this.chen = "你好"
}
}
})
let app = new Vue({
el: "#app",
data: {
},
components: {
'hello-com': hellocom
},
})
</script>
</body>
</html>
todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/lcXys.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
</head>
<body>
<div id="app">
<div class="main">
<div class="header">
<div class="logo">记事本</div>
<!-- 绑定回车事件,v-model绑定输入框的value值 -->
<input type="text" v-model="inputValue" id="input" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
</div>
<div class="doing todo">
<h3><span class="title">正在进行</span><span class="num">{{this.doingList.length}}</span></h3>
<div class="list">
<transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
<input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox"/>
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
<!-- <transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group> -->
</div>
</div>
<div class="done todo">
<h3><span class="title">已完成</span><span class="num">{{this.doneList.length}}</span></h3>
<div class="list">
<transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
<input @click.prevent="checkDone(item.id)" :data-id="index" type="checkbox" checked="checked"/>
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group>
<!-- <transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox" checked="checked">
<div class="content">{{item.content}}</div>
<div class="del" @click="deleteItem(item.id)">删除</div>
</div>
</transition-group> -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app =new Vue({
el:"#app",
data:{
todoList:[],
inputValue:""
},
computed:{
// 通过过滤todoList数据，得到未做好的列表和已做好的列表
doingList:function(){
let arr = this.todoList.filter(function(item,index){
return !item.isDone
})
return arr;
},
doneList:function(){
let arr = this.todoList.filter(function(item,index){
return item.isDone
})
return arr;
}
},
methods:{
enterEvent:function(){
// 将数据添加至todoList
this.todoList.push({
content:this.inputValue,
isDone:false,
id:this.todoList.length
})
// 保存
this.saveData()
//清除输入框的值
this.inputValue=""
},
// 将数据保存到本地存储
saveData:function(){
localStorage.todoList = JSON.stringify(this.todoList)
},
checkDone:function(id){
// // 每次删除一个
// this.todoList.splice(id,1);
// this.todoList.forEach((item,i)=>{
// item.id = i;
// })
this.todoList[id].isDone = !this.todoList[id].isDone;
// 每次修改必须保存
this.saveData()
console.log(id)
},
deleteItem:function(id){
this.todoList.splice(id,1);
this.todoList.forEach(function(item,i){
item.id = i;
})
this.saveData()
}
},
mounted:function(){
this.todoList =localStorage.todoList? JSON.parse(localStorage.todoList):[];
}
})
</script>
</body>
</html>
遍历循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>球星</h1>
<ul>
<li v-for="item in stars">
{{item}}
</li>
</ul>
<h>学生信息</h>
<ul>
<li v-for="item,key in student">
<h4>{{key}}----{{item.name}}</h4>
<p>年龄： {{item.age}}---学校：{{item.address}}</p>
</li>
</ul>
<p>循环对象</p>
<ul>
<li v-for="item in student[0]">
<h3>{{item}}</h3>
</li>
<img :src="student[0].imag" >
</ul>
<p>循环对象</p>
<ol>
<li v-for="item in student" v-if="item.age%2==1">
<h4>{{item.name}}</h4>
<p>年龄： {{item.age}}---学校：{{item.address}}</p>
</li>
</ol>
</div>
<script type="text/javascript">
let app=new Vue({
el: "#app",
data:{
stars:["詹姆斯",'杜兰特','戴维斯'],
student:[{name: "陈超",
age:20,
address: "安徽省",
imag: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2899873953,1367070987&fm=26&gp=0.jpg"
},
{
name:"李四",
age:21,
address: "芜湖市"
},
{
name:"张三",
age:25,
address:"上海市"
}
]
}
})
</script>
</body>
</html>
动态切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
#pane{
width: 350px;
height: 350px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<div v-show="isShow" id="pane">
HelloWorld
</div>
<button @click="isClick">切换显示内容</button>
</div>
<script type="text/javascript">
let app=new Vue({
el:"#app",
data: {
isShow: true,
},
methods:{
isClick: function()
{
app.isShow=!app.isShow
}
}
})
</script>
</body>
</html>
动态切换升级版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
#pane{
width: 350px;
height: 350px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<div v-show="isShow" id="pane" >
<h3 v-if="tab==1">首页</h3>
<h3 v-else-if="tab==2">新闻</h3>
<h3 v-else>列表</h3>
</div>
<button @click="shouye" data-id="1">首页</button>
<button @click="shouye" data-id='2'>新闻</button>
<button @click="shouye" data-id='3'>列表</button>
</div>
<script type="text/javascript">
let app=new Vue({
el: "#app",
data: {
isShow: true,
tab: 1
},
methods: {
shouye:function(e)
{
console.log(e)
let tabid=e.target.dataset.id
this.tab=tabid
}
}
})
</script>
</body>
</html>
京公网安备 11010502036488号