初探Vue3.0魅力

雨燕双飞 提交于 2020-04-26 15:23:59

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>

以上

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!