vue基础笔记1

骑在熊上的男人

已于 2023-08-10 09:47:49 修改

阅读量69

点赞数

分类专栏： vue学习经验文章标签： vue.js 前端 javascript

于 2023-08-01 10:44:39 首次发布

本文链接：https://blog.csdn.net/weixin_45020219/article/details/131843947

版权

vue学习经验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

国内下载Chrome浏览器插件

使用vue-cli创建项目

vue挂载方式：

创建用户代码块：使用快捷键直接可以一键生成vue模板文件

拓展：同一个界面不同路由实现页面展示效果不同

拓展：通过路由取值在页面展示内容并完成解码

国内下载Chrome浏览器插件

今天分享的就是如何在国内下载Chrome浏览器插件！

分享的这个网站叫做“扩展迷”（https://www.extfans.com/），几乎所有的Chrome应用商店中的插件都包括了，供大家免费下载！

使用vue-cli创建项目

使用cmd命令框输入：vue create 项目名（根据自己的需求，选择对应的项）

运行项目： npm run serve 引入

使用vue ui图形化创建，直接在cmd命令窗口输入vue ui

若需要使用elementUi组件化开发：npm i element-ui -S

若需要按需引入：npm install babel-plugin-component -D具体参考

项目打包：npm run build

vue基础板块重造

1.vue挂载方式：

<body>
    <div id="root">
        <input type="text" v-model="name">
        <h1>{{name}}</h1>
    </div>



    <script>
       const v = new Vue({
        //第一种挂载
            // el: '#root',
            data: {
                name: ''
            }
        })
      //第二种挂载
         v.$mount('#root')
    </script>

2.创建用户代码块：使用快捷键直接可以一键生成vue模板文件

第一步：点击设置，选择用户代码片段

第二部

第三步：输入快捷键设置：如下设置的：v1

"Print to console": {
		"prefix": "v1",
		"body": [
			"<script>",
			"new Vue({",
			"  el:'#root',",
			"  data:{",
			"    name:'张三'",
			"  }",
			"})",
			"</script>"
		],
		"description": "Create vue template"
	}

data的二种写法，推荐后面的第二种（方式二：不能使用箭头函数，只能使用普通函数）

<script>
        // new Vue({
        //     el: '#root',
        //     //第一种写法，对象的形式
        //     data: {
        //         name: '张三'
        //     }
        // })
        // ---------------------------
        new Vue({
            el: '#root',
            //第二种写法，函数的形式
            data() {
              return {
                name : '张三'
              }
            }
        })
    </script>

vue数据代理

定义：通过一个对象代理对另一个对象中属性的操作（读/写）Object.defineProperty：给一个对象添加属性如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新通过getter收集依赖，修改时通知watcher更新视图，对数据的操作（读/写）进行拦截

    <script>
        let number = 18
        let proson={
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(proson,'age',{
            // value:18,
            // enumerable:true,  //控制属性是否会被枚举，默认为false
            // writable:true,    //控制属性是否会被修改，默认为false
            // configurable:true //控制属性是否会被删除，默认为false
            //当有人读取proson属性的age属性时，get函数就会被调用，且返回值就是age的值
            get:function () { 
                console.log('有人读取了get属性');
                return number;  
               
            },
            //当有人修改proson属性的age属性时，set函数就会被调用，且收到修改的具体值
            set:function(value){
                console.log('有人修改了age属性,且值为：',value);
                number=value;
            }
        })
        // console.log(Object.keys(proson));
     
        console.log(proson);
    </script>

  //获取按钮上显示的文字
        showInfo(event){
           console.log(event.target.innerText);
        }

v-on的简写形式

简写形式：@click=“函数名”

一般形式：v-on:click="showInfo"

vue中事件修饰符

.prevent 阻止默认事件

 <a href="https://element.eleme.cn/#/zh-CN" @click.prevent="showInfo">点击提示</a>

.stop 阻止事件冒泡

.once 事件只触发一次

.capture 使用事件的捕获模式

键盘事件

@keyup和@keydown两种

普通函数：

  showInfo(event){
            // console.log(event.keyCode);
            if (event.keyCode !== 13) 
            return
              console.log(event.target.value);
            
        }

在vue中直接使用：@keyup.enter="showInfo"

vue计算属性

  <div id="root">

   姓： <input type="text" v-model="firstname" ><br>
   名： <input type="text" v-model="lastname" ><br>
   姓名: <span>{{fullname}}</span>
  </div>
  <script>
    
    const vm = new Vue({
      el: '#root',
      data: {
        firstname: '张',
        lastname:"三"
      },
      computed: {
        fullname:{
          get(){
            // console.log('get被调用了'); 
           return this.firstname +'-'+ this.lastname
        },
        set(value){
          const arr=value.split('-')
            this.firstname = arr[0]
            this.lastname = arr[1]
        }
        }
    
      },
 
    })
  </script>

计算属性简写

fullname:function(){

// console.log('get被调用了');

return this.firstname +'-'+ this.lastname

}

例子：天气切换案例

  <div id="root">
  <span>今天天气很{{info}}</span>
  <button @click="chanage">天气切换</button>
  </div>
  <script>
    
    const vm = new Vue({
      el: '#root',
      data: {
        ishot:true
      },
      computed: {
        info(){
          return this.ishot ? '炎热':'凉爽'
        }
      },
      methods: {
        chanage(){
          this.ishot= !this.ishot
        }
      }

 
    })
  </script>

vue中的监视属性

监视属性有两种写法：1，.new vue时传入watch配置

2，通过vm.$watch监视

深度监视

绑定class样式

不变化的属性正常写，需要变化的动态写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="./vue.js"></script>
<style>
  .basic {
    width: 300px;
    height: 100px;
    border: 1px black solid;
  }

  .happy {
    background-color: #f09090;
  }

  .sad {
    border-radius: 10px;

    background: rgb(11, 179, 221);
  }

  .normal {
    border: 5px red solid;

  }

  .atgu1 {
    text-align: center;
    text-shadow: 10px 10px black;
  }

  .atgu2 {
    font-size: 30px;
  }

  .atgu3 {
    border-radius: 50%;
    border-style: double;
    background-color: greenyellow;
  }
</style>

<body>
  <div id="root">
    <!-- 字符串写法，适用于：样式类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="chanagemood">{{ name}}</div><br><br>
    <!-- 数组写法，适用于：要绑定的样式不确定，名字也不确定  -->
    <div class="basic" :class="arr" @click="chanagemood">{{ name}}</div><br><br>
    <!-- 数组写法，适用于：要绑定的样式个数确定，名字也确定，但是要动态决定用不用  -->
    <div class="basic" :class="obj" @click="chanagemood">{{ name}}</div>


  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        name: 'good',
        mood: 'normal',
        arr: ['atgu1', 'atgu2', 'atgu3'],
        obj: {
          atgu1: true,
          atgu2: false
        }
      },
      methods: {
        chanagemood() {
          //  this.mood='happy'
          const arr = ['happy', 'sad', 'normal']
          const i = Math.floor(Math.random() * 3)
          this.mood = arr[i]
        }
      },
    })
  </script>
</body>

</html>

条件渲染

v-show：适合于变化场景频繁的话推荐使用

v-if：不展示的dom元素直接被移除

基本列表

<body>
  <div id="root">
    <!-- 遍历列表 -->
  <ul>
    <!-- <li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li> -->
    <li v-for="(p,index) in persons" :key="p.id">
      {{p.name}}---{{p.age}}
    </li>

  </ul>car
    <!-- 遍历对象 -->
    <ul>
      <!-- <li v-for="(a,b) in car" >
        {{a}}---{{b}} -->
      <li v-for="(value,k) in car" :key="k">
        {{k}}---{{value}}
      </li>
  
    </ul>
        <!-- 遍历字符串 -->
        <ul>
          <!-- <li v-for="(a,b) in str">i
            {{a}}---{{b}} -->
            <li v-for="(char,i) in str" :key="i">
              {{char}}---{{i}}
          </li>
      
        </ul>
    

  </div>
  <script>
   const v = new Vue({
      el: '#root',
      data: {
       persons:[
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:19},
        {id:'003',name:'王五',age:15}

       ],
       car:{
        name:'奥迪A8',
        price:'80万',
        color:'黑色'
       },
       str:'hello'
      }
    })
  </script>
</body>

拓展：同一个界面不同路由实现页面展示效果不同

结合v-if共同使用

  //写在需要显示的界面，通过v-bind类名绑定形式进行展示或隐藏
methods: {
    resetData() {
      const {path} =this.$route;
      // 根据不同路由地址，返回不同数据
      if (path === '/401') {
        this.fristNum='text-4-1'
        this.lastNum='text-4-3'        
      } else if (path === '/404') {
        this.fristNum='text-4-1'
        this.lastNum='text-4-2'
      } else if (path === '/500') {
        this.fristNum='text-5-1'
        this.lastNum='text-5-2';
      }
      this.currentPage = path;
    },  
    },
watch: {
      $route: {
        handler: 'resetData'
      }
  },
created() {
      this.resetData();
      // console.log(this.$route);
    }

   // route.js里面需要合并界面路由指向均为同一路由地址，例如：err-index
    {
        path: '/404',
        children: [{
            path: '',
            component: () =>
                import ('@/views/errorpage/err-index')
        }],
        hidden: true
    },

    {
        path: '/401',
        children: [{
            path: '',
            component: () =>
                import ('@/views/errorpage/err-index')
        }],
        hidden: true
    }

参考:【vue】实现多个路由共享同一个页面_vue多个路由指向同一个页面_爱吃香草冰淇淋的阿喵的博客-CSDN博客

如下：

[index.js]

设置多个路由指向同一页面，注意path和name必须具有唯一性

  {
    path: '/column',
    name: 'column',
    component: () => import('../components/partycolumn/ColumnPage')
  },
  {
    path: '/column1',
    name: 'column1',
    component: () => import('../components/partycolumn/ColumnPage')
  },
  {
    path: '/column2',
    name: 'column2',
    component: () => import('../components/partycolumn/ColumnPage')
  }

[ColumnPage.vue]

<template>
  <h1>{{ title }}</h1>
</template>
 
<script>
  export default {
    name: 'ColumnPage',
    data () {
      return {
        title: ''
      }
    },
    methods: {
      resetData () {
        // 根据不同路由地址，返回不同数据
        if (this.$route.fullPath === '/column') {
          document.title = '专栏' // 修改网页title
          this.title = '专栏' // 返回业务数据
        } else if (this.$route.fullPath === '/column1') {
          document.title = '专栏1'
          this.title = '专栏1'
        } else if (this.$route.fullPath === '/column2') {
          document.title = '专栏2'
          this.title = '专栏2'
        }
      }
    },
    created () {
      this.resetData()
    },
    watch: {
      $route: {
        handler: 'resetData'
      }
    }
  }
</script>
 
<style scoped>
 
</style>

拓展：通过路由取值在页面展示内容并完成解码

    data(){
      return{   
        errMsg: ''          
      }
    },
    mounted(){
      const {errMsg} = this.$route.query;
      if(errMsg) {
        this.errMsg = decodeURIComponent(errMsg);
      }
    }

 <p>{{errMsg}}</p>

骑在熊上的男人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础笔记1

若需要按需引入：npm install babel-plugin-component -D。若需要使用elementUi组件化开发：npm i element-ui -S。使用vue ui图形化创建，直接在cmd命令窗口输入vue ui。一般形式：v-on:click="showInfo"简写形式：@click=“函数名”项目名（根据自己的需求，选择对应的项）.prevent 阻止默认事件。.capture 使用事件的捕获模式。.once 事件只触发一次。.stop 阻止事件冒泡。
复制链接

扫一扫