B站该教学视频资源 =》传送门

李游Leo 老师的公开课做的笔记

安装 npm

参考手顺

安装结果

安装cnpm手顺

clone 下来 vue创造者的 demo版本

gihub地址：传送门

依据 package.json 文件，cnpm i 下载依赖

下记是老师的图

运行个dev

Ctrl + C 停止。。。。。。

运行个 serve 我应该再去学学英语。。。。。。

=> http://localhost:5000/

使用作者提供的小例子

=> 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>

以上

来源：oschina

链接：https://my.oschina.net/u/4365870/blog/4254138

标签