Vue Demo code 计数器那么安装和使用Vue这个JavaScript库有哪些方式呢?
方式一:在页面中通过CDN的方式来引入;
方式二:下载Vue的JavaScript文件,并且自己手动引入;
方式三:通过npm包管理工具安装使用它(webpack再讲);
方式四:直接通过Vue CLI创建项目,并且使用它
Vue Demo code 计数器
<div id="app">
<h2>Hello World</h2>
</div>
<script src="https://unpkg.com/vue@next"></script>
<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');
</script>
JS 原生 Demo code 计数器
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
// 1.获取所有的元素
const counterEl = document.querySelector(".counter");
const incrementEl = document.querySelector(".increment");
const decrementEl = document.querySelector(".decrement");
// 2.定义变量
let counter = 100;
counterEl.innerHTML = counter;
// 3.监听按钮的点击
incrementEl.addEventListener("click", () => {
counter += 1;
counterEl.innerHTML = counter;
});
decrementEl.addEventListener("click", () => {
counter -= 1;
counterEl.innerHTML = counter;
});
</script>
JS 原生:命令式变成
Vue: 声明式编程
MVC: Model - View- Controller(以前很常用的架构模式)
- 如:ios开发,js 原生的前端开发等
MVVM : Model - View - ViewModel (是目前非常流行的架构模式)
- Vue 采取的就是 MVVM,虽然没有完全遵守但是整个设计师收到它启发的
Template 两种方式
1.Script 方式
<div id="app">哈哈哈哈啊</div>
<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 src="../js/vue.js"></script>
<script>
document.querySelector("#why")
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>
2.Template 方式
<div id="app"></div>
<template id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
<button @click="btnClick">按钮</button>
<button @click="btn2Click">按钮</button>
</div>
</template>
<script src="../../dist/vue.global.js"></script>
<script>
debugger
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--;
},
btnClick: () => {
// 不可以这样写箭头函数!!
// 结论:箭头函数时, 这个this就是window
console.log(this);
},
btn2Click: function() {
//this 指向代理,这样才能找到我们的 data 等里面的东西
console.log(this);
//具体 this 指向的问题,可以查看文章: https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA
}
}
}).mount('#app');
</script>
Vue3 源码
搜 vue-next : https://github.com/vuejs/vue-next
下载打了 tag 的稳定版本,不要下载 branch 版本
下面直接下载开始,不过这种方式的下载可能运行不起来,推荐还是用 git Clone 来下载
在想要的文件夹中 打开命令行 git clone https://github.com/vuejs/vue-next.git
如果是直接 download 的话,下载好之后打开命令行执行如下命令
npm install yarn -g (因为 vue 是通过 yarn 来管理的)
git init
git add .
git commit -m "安装"
删除 yarn.lock 文件
yarn install
yarn run dev
package/vue/examples/tracy/demo.html 新建文件
package/vue/dist/vue.global.js 是 vue 项目打包之后的文件
package.js 里配置 --sourcemap,然后再 yarn run dev 这样 debugger 的时候就可以直接进入各自分包的源码查看 vue3 是如何通过 typescrpit 写的源码
这样 yarn run dev 之后会生成 package/vue/dist/vue.global.js.map
在 demo.html 文件 debugger 的时候就会进入 package 里具体的文件来查看了 具体的 .ts 文件里是怎么写的了