Vue常用指令及其术语
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>0804作业</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div class="1">{{a}}</div>
<div>
<text v-on:copy="bbbbb">今天天气{{weather}}</text>
<!-- <input placeholder="修改天气" v-model.lazy="weather">-->
<input placeholder="修改天气" @focusout="www" ref="valuehhhhh">
</div>
<hr>
<div v-if="mess != ''">我是双向绑定的div，数据是“{{mess}}”</div>
<div v-else>目前还没有数据哦，请在下面填写吧~</div>
<input v-model="mess" placeholder="快来写快来写">
<div >{{mess}}</div>
</div>
</body>
<script>
//常用vue指令
//创建vue实例并挂载到相应的文档位置中
let a = 'test'
let weather = '晴'
let mess = ''
Vue.createApp({
data() {
return {
a,
weather,
mess,
}
},
methods: {
bbbbb(rr) {
console.log(rr)
console.log(window.getSelection().toString())
let copyV = window.getSelection().toString()
alert(`已经捕获的复制行为,内容是“${copyV}”`)
},
www(){
// this.$data.weather = this.valueW
// console.log(this.$refs.valuehhhhh.value)
this.weather = this.$refs.valuehhhhh.value
}
}
}).mount(document.getElementById('app'))
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
