1、安装
<script src="https://unpkg.com/vue@next"></script>
简单应用
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>这是练习vue的方法</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.class1{
background-color: #cc0000;
}
</style>
</head>
<body>
<div id="HelloVue" class="demo1">
<p>这是v-text更新:<span v-text="message"></span></p>
{{message}}
</div>
<div id="forApp" class="demo">
</div>
<div id="app" class="demo">
<p href="#"> {{htmls}}</p>
<br>
<p href="#" v-html="htmls"></p>
</div>
<div id="v_bindApp" >
<label>修改颜色<input type="checkbox" v-model="use" id="box1"></label>
<br><br>
<p v-if="use">我变身了,你就看见我了!</p>
<div v-bind:class={"class1":use}>v-bind:class指令</div>
<a v-bind:href="goto">小窗口,大世界,带你走遍全世界!</a>
</div>
<div id="v_forApp">
<ol>
<li v-for="list in lists" ><p v-text="list.username">这是一行</p></li>
</ol>
</div>
<div id="getData" v-text="lists">
</div>
<div id="appp" ><p v-text="info">fsdfs</p></div>
<script>
<!--1-->
const helloVueApp={
data() {
return { message:"Hello Vue!!"};
}
}
<!--2-->
const ForApp=Vue.createApp({
data(){
return{count: 5}
},
methods:{
increment(){
this.count++
}
}
})
<!--3-->
const a=ForApp.mount('#forApp')
for (let i=0;i<10;i++) {
document.write(a.count)
document.write("</br>")
a.increment()
}
<!--4-->
const v_htmlApp={
data() {
return {htmls:"<span style='background-color: #0f91f5'>这里显示蓝色</span>"}
}
}
<!--5-->
let v_bindApp={
data(){
return{use:false,goto:"https://www.baidu.com"}
}
}
<!--6-->
let v_forApp={
data(){
return{lists:{'username':'a','username1':'b'}}
},
methods: {
add:function () {
console.log(this.lists)
}
}
}
<!--7-->
const appp = {
data() {
return {
info: 'Ajax 测试!!'
}
},
mounted () {
axios
.get('http://192.168.1.5:8888/data1')
.then((response) => {
this.info=response.data.username
console.log("这是info:",this.info)
})
.catch(function (error) {
console.log(error);
});
}
}
Vue.createApp(appp).mount('#appp')
Vue.createApp(v_forApp).mount("#v_forApp")
Vue.createApp(helloVueApp).mount("#HelloVue")
Vue.createApp(v_htmlApp).mount("#app")
Vue.createApp(v_bindApp).mount('#v_bindApp')
</script>
</body>
</html>