B站 该教学视频资源 =》 传送门
李游Leo 老师的公开课 做的笔记
安装结果
clone 下来 vue创造者的 demo版本
gihub地址 ： 传送门
依据 package.json 文件 ，cnpm i 下载 依赖
下记是老师的图
运行个dev
Ctrl + C 停止 。。。。。。
运行个 serve 我应该 再去学学 英语 。。。。。。
使用作者提供的小例子
=> https://github.com/vuejs/vue-next#status-beta
here => https://github.com/vuejs/vue-next-webpack-preview
小例子 运行
vue 脚手架 （前面都是 浮云 ~~~）
安装一下
npm install -g @vue/cli
vue -V
检查已经安装成功
创建项目
vue create vue-next-cli-demo
（mac 是这个，但windows 并不是，没有窗口交互互动的，小坑坑~）
解决办法
1.winpty vue.cmd create 你的工程名（你滴名纸）
就和视频里面一样啦~~~
创建工程需要一些自定义的设定 ，设定一下 。。。。。。
2.vue 2 =》 vue 3 需要升级一下
vue add vue-next
windows 会问个问题 选择 y 就会开始升级
3.起服务
npm run serve
终于看见这个画面了~~~
git 的工作终于告一段落了~~~
////////////////////////////////////////////////////////////////////////////////////华丽丽的分割线//////////////////////////////////////////////////////////////////////////////////////////
可以开始 写一些 小demo 啦
home about 后面追加一个自己的小link
app.vue 是类似启动程序
web程序里的 index 起始页
src\App.vue
src\router\index.js
照着about写组自己的
src\views
- 照着About.vue
- 写个自己的 Chin.vue
运行结果
传统写法 data methods
vue3新增方法 setup，一定注意最后需要return，否则会报错。
watch （注意引用）
computed （计算值属性，且注意引用）
getCurrentInstance 路由信息？？？ 没听清！！！反正是能取得好多好多东西！！！
vue的API
chin.vue 整体代码
<template>
<div class="about">
<h1>HELLO CHIN SEI</h1>
<div>setup的count === {{count}}</div>
<div>data的count === {{countData}}</div>
<div>计算值属性的doubleCount === {{countDouble}}</div>
<button style="margin:20px;" @click="add" >多C多漂亮，C++(setup的count)</button>
<button style="margin:20px;" @click="addData" >多C多漂亮，C++(data的count)</button>
</div>
</template>
<script type="text/javascript">
import { ref ,watch ,computed,getCurrentInstance} from 'vue';
export default{
data(){
return{
countData:0
}
},
methods:{
addData:function(){
this.countData++;
}
},
setup(){
const count = ref(0);
const add = function(){
count.value++;
};
const countDouble = computed(()=> count.value * 2);
const {ctx} = getCurrentInstance();
console.log(ctx);
console.log(ctx.$router);
console.log(ctx.$router.currentRoute.value);
watch(
()=> count.value,val => {
console.log(`count is ${val}`)
}
);
return{
count,add,countDouble
}
}
}
</script>
////////////////////////////////////////////////////////////////////////////////////华丽丽的分割线//////////////////////////////////////////////////////////////////////////////////////////
vuex
src\store\index.js
import Vuex from "vuex";
export default Vuex.createStore({
state: {
a:10,
chin:{
aa:20,
bb:30
}
},
mutations: {},
actions: {},
modules: {}
});src\views\Chin.vue 在这怎么取。。。
console.log(computed(()=>ctx.$store.state.a));
const store_a = computed(()=>ctx.$store.state.a);
console.log(computed(()=>ctx.$store.state.chin.aa.value));
const store_chin_aa = computed(()=>ctx.$store.state.chin.aa);输出结果
方法级的
src\store\index.js
mutations: {
setAdd(state){
state.a++;
},
setAddCount(state,countA){
state.a = state.a + countA;
}
},src\views\Chin.vue 在这怎么使用。。。
const add1 = ()=>{
ctx.$store.commit('setAdd');
};
const add2 = ()=>{
ctx.$store.commit('setAddCount',count.value);
};另 div的一个小切替demo
（在about 页面做的）所以
src\views\About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="change">div 的切替</button>
<div class="myDiv" v-show='showFlg'></div>
</div>
</template>
<script type="text/javascript">
import { ref } from 'vue';
export default{
setup(){
const showFlg = ref(true);
const change = function(){
showFlg.value = !showFlg.value;
};
return {
showFlg,change
}
}
}
</script>
<style type="text/css" scoped>
.myDiv{
width:200px;
height:200px;
background:red;
}
</style>
以上
