本文目录 ⌄
引入vue的方法：
//通过CDN引入
<script src="https://unpkg.com/vue@next"></script>
//保存源码从本地引入
<script src="../js/vue.js"></script>Vue的源码中有一个Vue的实例，可以直接使用：
直接使用这个实例并调用createApp方法可以得到一个app的实例：
const app=Vue.createApp(...); //传入的参数为一个json
//template：通过一个字符串来定义vue需要帮助我们渲染的模板信息
//data：通过一个函数来返回数据，在html中使用双大括号使用，在js中使用this访问
//methods：通过一个json来定义要使用的方法并将这个app实例挂载到一个标签中：
<div id="app"></div>
<script>
const why={
template:"<h2>hello world</h2>"
}
const app=Vue.createApp(why);
app.mount("#app");
</script>整合的写法：
Vue.createApp({
template: `
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
`,
data: function () {
return {
message: "hello world",
counter: 100
}
},
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount("#app");原生的js开发是命令式编程，vue是声明式编程。
两种方式将template中的元素抽取出来：
使用x-template
//通过x-template写入，有提示、无高亮
<script type="x-template" id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</script>
<script>
Vue.createApp({
// template以#开头，会被用作querySelector，并使用匹配元素的innerHTML来填充模板
template:"#why",
data: function () {
return {
message: "hello world",
counter: 100
}
},
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount("#app");
</script>使用template
<!-- html原生的，不会被渲染，只用于JavaScript -->
<template id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
Vue.createApp({
template:"#why",
data: function () {
return {
message: "hello world",
counter: 100
}
},
methods: {
increment() {
console.log("点击了+1");
this.counter++;
},
decrement() {
console.log("点击了-1");
this.counter--;
}
}
}).mount("#app");
</script>