parent
73dcc76ec8
commit
7affee848b
5 changed files with 131 additions and 1 deletions
@ -0,0 +1,27 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<meta http-equiv="X-UA-Compatible" content="ie=edfe"> |
||||
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script> |
||||
<title>v-html</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<p v-text="html_content"></p> |
||||
<!-- 观察v-text和v-html的区别 --> |
||||
<p v-html="html_content"></p> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
const App = { |
||||
data() { |
||||
return { |
||||
html_content: "<a href='http://www.baidu.com'>百度</a>" |
||||
} |
||||
} |
||||
} |
||||
Vue.createApp(App).mount("#app") |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,35 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<meta http-equiv="X-UA-Compatible" content="ie=edfe"> |
||||
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script> |
||||
<title>v-on</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<input type="button" value="点击执行" v-on:click="click_action"><br> |
||||
<input type="button" value="双击执行" @dblclick="double_action"> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
const App = { |
||||
data() { |
||||
return { |
||||
count: 0, |
||||
} |
||||
}, |
||||
methods: { |
||||
click_action: function () { |
||||
alert('执行方法成功') |
||||
}, |
||||
double_action: function () { |
||||
alert("当前数值为：" + this.count+', 再次双击将+1') |
||||
this.count++ |
||||
} |
||||
} |
||||
} |
||||
Vue.createApp(App).mount("#app") |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,29 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<meta http-equiv="X-UA-Compatible" content="ie=edfe"> |
||||
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script> |
||||
<title>v-show</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<img src="https://v2.cn.vuejs.org/images/logo.svg" alt="" v-show="true"> |
||||
<img src="https://v2.cn.vuejs.org/images/logo.svg" alt="" v-show="false"> |
||||
<h2 v-show="isShow">对象形式</h2> |
||||
<h2 v-show="age>18">{{ age }}</h2> |
||||
</div> |
||||
<script> |
||||
const App = { |
||||
data() { |
||||
return { |
||||
isShow: true, |
||||
age: 20, |
||||
} |
||||
} |
||||
} |
||||
Vue.createApp(App).mount("#app") |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,39 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<meta http-equiv="X-UA-Compatible" content="ie=edfe"> |
||||
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script> |
||||
<!-- <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>--> |
||||
<title>v-text和插值语法</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"> |
||||
<!-- v-text --> |
||||
<h2 v-text="message+'!'">测试</h2> |
||||
<h2 v-text="message+info">测试</h2> |
||||
<!-- 插值语法--> |
||||
<h2>{{ message }}!!{{ info }}</h2> |
||||
</div> |
||||
<script> |
||||
// // 此处是Vue2的写法，所以上面引用需要引用Vue2 |
||||
// const App = new Vue({ |
||||
// el: '#app', |
||||
// data: { |
||||
// message: '您好', |
||||
// } |
||||
// }) |
||||
// 此处是Vue3的写法， 引用时需要引用Vue3 |
||||
const App = { |
||||
data() { |
||||
return { |
||||
message: '您好', |
||||
info: '信息', |
||||
} |
||||
} |
||||
} |
||||
Vue.createApp(App).mount('#app') |
||||
</script> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue