VUE初始--学习笔记

最新推荐文章于 2024-06-13 14:23:28 发布

左揽新月

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_55113068/article/details/122564128

版权

记录一点杂七杂八的学习笔记，初学时写的，暂时就不分类了。杂七杂八往这堆堆。其实也能算是js笔记。

1.【props】：
道具，用来接收父组件中的数据，其值为数组（即从父元素传给子元素）
举例子：props:[‘name’] //接收父组件中的name
注意，props是从上到下的单向数据传递，反之则不行
【注意-驼峰命名法】使用驼峰命名法时，要记得转化字符间的-。
简单例子：isName会自动转换成is-name，如果直接使用isName，会报错显示未定义。
在这个案例中的例子： props:[‘schoolName’],在定义的组件内需要写成 school-name=‘需要传递的数值’
school-name若要写成动态时，在前面加上冒号，并且：school-name=“‘数值名’”，否则’数值名’会被认为是一个变量（并且没有定义），加上’ '后则能被当成字符串接收。用数组[下标]传值的时候不用。

【$emit】:能将子组件中的值传到父组件中。

【vm.$options】

2.【父子组件传值/修改小技巧】
下面的方法使用起来方便，但是不适合用于多数据/复杂情况，不然出问题了（例如有人通过$root把数据给修改了）很难发现问题所在，难以维护。

1、父元素的方法可以直接修改父元素的数据，所以可以将父元素的方法传递给子元素，然后由子元素进调用，修改父元素的数据。

2.用$parent.changeEvent(需要修改的变量名) 这种形式来直接修改。可以直接放在按钮里@click=使用
（适用于需要修改的数据比较少的时候）

3、若是多个组件相嵌套的界面，需要获取外层的父组件（根组件）可以用$root

3.【Document 对象】
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象属性和方法：

https://www.runoob.com/jsref/dom-obj-document.html

4.vue中style的scoped属性：
在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化。
但是当对全局样式进行调整时，scoped属性是确保样式唯一作用于此不影响其他组件，在修改全局样式的时候需要单独进入scoped的版块进行修改，会增加一点小麻烦。
[浅析scoped原理]：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。

5.template
template元素：顾名思意，就是用来声明是“模板元素”。
template元素的出现旨在让HTML模板HTML变得更加标准与规范

6.Vue cli：交互式的项目脚手架
使用脚手架之后我们开发的页面将是一个完整系统。
拥有丰富的官方插件集合，集合了前端生态中的最好的工具。

7.[ state是什么? ]
定义:state(vuex) ≈ data (vue)
vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新。

[ mapState是什么? ]
表面意思:mapState是state的辅助函数.
mapState作用：可以辅助获得多个state的值
总结：mapState就是用来 [ 批量 ] 直接给数据直接添加计算属性的

vuex中state中的数据在使用的时候，一般都是在computed中定义的，因为在data中定义的话是一次性的，不会随着vuex中数据变化而变化，虽然可以通过watch监听，但是很麻烦,用mapstate可以解决这个问题。

在使用mapState之前,要导入这个辅助函数:

import { mapState } from 'vuex'

使用实例：

import {mapState} from 'vuex'
computed:mapState({
	//第一种写法
	menuStatus：'menuStatus'
	//第二种写法
	menuStatus:(state)=>state.menuStatus
	//计算属性中的普通函数
	fn(){return ...

更简洁一点的：

//在计算属性中
computed:{
	...mapState([
		//必须带引号
		'menuStatus'
	])
}

8.data中的数据导入，是用冒号：
而不是用等于=！！！警惕低级错误！！！
例如：
正确的：

tableLabel : [
          {id: 0, name: "id",value: "编号",width: '50'},
          {id: 1, name: "username",value: "用户名",width: '80'},
          {id: 2, name: "password",value: "密码",width: '80'},
        ]

错误的：

tableLabel = [
          {id: 0, name: "id",value: "编号",width: '50'},
          {id: 1, name: "username",value: "用户名",width: '80'},
          {id: 2, name: "password",value: "密码",width: '80'},
        ]

9.dialog : 弹出框

10.算是小模板说明

<script> 
import ... from ...        //引入组件

export default {          //模块指定默认输出
  name: "... ",              //绑定组件名称
  components: {         //注册组件
    HelloWorld,           //helloWorld是组件名。注册了的组件必须在<templete>中使用
                                 //直接用<组件名>当做一个模块，<templete>中放哪即这个组件插在哪块
  }, 
};

data( ){                      //用于存放数据
  return{                    //存放具体数据
      
           }
}

computed：{            //计算属性，能够实时监听计算刷新。按需选择
                 
                    }

methods：{              //顾名思义，用来放方法
 choseMan: function() {      //方法名：function（）{}
        alert("111")                //方法的具体操作。这边是举个例子
      },
                
                  }

</script>

<style> </style>               //样式模块按需添加

11.[ export 与export default 的区别]：
export命令：用于规定模块的对外接口。
export default命令：为模块指定默认输出。给用户提供方便，不用阅读文档就能加载模块。
不用深究这个，我们一般都用default默认的，方便

12.[ less ]：
css文本预处理器，它可以帮我们减少有关css中的大量重复工作。它增加了变量、函数、混合等特性。
less可以说是动态化的css语言，主要是因为他的代码可以复用。
（先大概了解概念，暂时用不到，不细究了，等用到了再整理用法

13.[ Vuex ]:
Vuex是专为vue.js开发的状态管理模式，说白了，这个的状态（state）指的就是全局数据。总结：Vuex管理的是数据
Vuex中数据中的数据不用data表示，而用state（链接第7个知识点，其实内容差不多）
Vuex提供一个仓库，Store仓库里面放了很多对象。（注意：一个应用或是项目中只能存在一个Store实例！！）

Vuex应用的核心就是Store（仓库），即【响应式容器】，用来定义应用中的数据以及数据处理工具，在组件中调用state中的状态时仅需要在计算属性中返回即可。

Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。

Vuex和Vue一样，在使用前需要在文件目录中下载、导包、引入。

//引入vuex

创建实例对象Store：

var store = new Vuex.Store( { 
      state：{
          name： 'vuex.js直接引用'
                  }
     })

14.setTimeout()
属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种：

1.setTimeout(要执行的代码, 等待的毫秒数)
2.setTimeout(JavaScript 函数, 等待的毫秒数)

15.小标注
后端-------通过API，返回数据------------------
前端-------通过Ajax获取数据，再渲染----------

16.Ajax （Asynchronous JavaScript And XML 即异步JavaScript和XML技术）
用于实现与服务器进行异步交互的功能

Ajax的技术优势：
1.按需获取数据，能够减轻服务器的负担
2.把以前一部分由服务器负担的工作转移到了客户端，节省宽带（空间和租用成本）
3.实现无刷新更新网页，用户体验更好

先大概理下概念，以后需要了再学习整理。

17.rel=noopener的作用：确保安全
当使用 target=’_blank’ （设置界面打开新窗口属性的）打开一个新的标签页时，新页面的 window 对象上有一个属性 opener，它指向的是前一个页面的 window 对象，因此，后一个页面就获得了前一个页面的控制权，甚至在跨域的情况下他也可以生效。
使用 rel=noopener 可以禁用 window.opener。

所以：经常是一起出现的
target="_blank"
rel=“noopener”

18.在html代码中&nbsp和空格的区别：
在html代码中每输入一个转义字符&nbsp就表示一个空格，输入十个&nbsp，页面中就显示10个空格位置。
而在html代码中输入空格，不管输入多少个空格，最终在页面中显示的空格位置【只有一个】

19.router板块
main.js是主要用来编写路由/引入的板块
但一个页面可能需要用到的路由较多，最好统一写在文件夹router中，然后导入到main.js中使用
举栗子：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

=======================================
单独的路由书写：（在index.js中，举个完整栗子）

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',     //根目录，即主界面
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')    //这里放根目录（主页面）的地址
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

20.Vue-cli 静态资源配置问题：

src目录下的资源只能import或require。【注意点！！！】
想静态引入的话，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，html的引入路径如下：./static/… （我在return的数组中尝试，暂时还不能解决）
不用管dev的时候。在打包之前，把所有图片src的路径从require方法，直接写成相对路径。打包交给后端之后，后端再把静态资源图片目录设置成dist/static/img.此时前端原来的相对路径正好可以取到static/img下面的图片。

静态本地引入，示范：

<div>
      <img :src="url" alt="">
 </div>

export default {
  name: 'CarouselLogin',
  data () {
    return {
      url: require('@/photo/lrsf.jpg')   //注意，这里是@，不能用src目录（与方法2也不兼容）
</script>

21.框架小说明（其实这个不应该放在这，这是搭配el框架用的，但既然之前的我写了，就姑且放这吧）
prefix-icon=“el-icon-user” //在前面加入el-icon-user图标
suffix-icon=“el-icon-user” //在后面加入el-icon-user图标

22.css注意事项
偷懒把一个页面复制到另一个界面时必须注意，当A跳转到B界面，此时已经加载了B界面的全部，若还要再跳转回A界面，必须改赋值的样式等等，定义的名字不能一样的，否则会直接读取使用

23.触发器（trigger）:
对于触发 Popover 的元素，有两种写法：
1.使用 slot=“reference” 的具名插槽
2.使用自定义指令v-popover指向 Popover 的索引ref

trigger属性用于设置何时触发 Popover，支持四种触发方式：(默认值是click）
1.trigger=“hover” 鼠标悬停
2. trigger=“click” 点击
3.trigger=“focus” 聚焦事件（长按））
4.trigger=“manual” 自定义，手动触发

24.Popover 弹出框（其实这个也是el框架的）
el-popover组件：在页面上弹出新的窗口（块。也可以说是新的小页面）

25.滚动条：（哈哈还是element的，刚学分不清，小问题。反正很多都是vue+element的）

 <el-scrollbar style="height:90%">
</el-scrollbar>

但是这个属性！！在element官方文档里没有，也不能被小div块包含，否则会失效

美化滚动条样式：
::-webkit-scrollbar {
		  width: 15px;
	} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
		  background-color: #fdfdfdd7;
	} /* 滚动条的滑轨背景颜色 */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(32, 205, 228, 0.438); 
	} /* 滑块颜色 */

	::-webkit-scrollbar-button {
		  background-color: #888888;
	} /* 滑轨两头的监听按钮颜色 */

	::-webkit-scrollbar-corner {
		  background-color: rgb(120, 183, 202);
	} /* 横向滚动条和纵向滚动条相交处尖角的颜色 这条其实没用，因为我的横向滚动条被隐藏了*/
.el-scrollbar_wrap{
  overflow-x:hidden;
}//这行是设置隐藏横向滚动条

26.【Sass/Scss、Less是什么?】
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(Sassy CSS)。SCSS(Sassy CSS)是CSS语法的扩展。这意味着每一个有效的CSS也是一个有效的SCSS语句，与原来的语法兼容，只是用{}取代了原来的缩进。

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

【总结】别看这么多屁话，其实就是Sass比Less多一些函数语法啥的，写法有一些不同。只需要知道有这个东西就行了，用的最广泛的还是Less。

27.【!important的作用】
CSS中的!important一般都是用来做hack的，后面缀上了!important的css语句，让浏览器优先执行这个语句。
因为css有继承的样式，加上!importanrt可以覆盖父级的样式。 IE6中不能识别，但IE7和别的浏览器中可以用，用来处理浏览器的兼容性。

28.【关于插入视频】
注意事项：视频名字不要太长，过长且中间有空格的最好重命名一下。文件路径必须放在源文件夹下面。
举例：

<div style="width: 100%; position: absolute;">    //放在一个div块里，写属性啥的
      <video id="v1" src="../../video/snow.mp4" type="video/mp4" autoplay="autoplay" loop="loop" muted="muted" height="100%" width="100%" >
      </video>
</div>

vue是支持使用video的，不需要导包啥的，暂时没遇到过不能播放的问题。
一般来说，如果视频放不出来先考虑路径问题

Autoplay：自动播放
Loop：无限循环
Muted：声音
muted 属性设置或返回音频/视频是否应该被静音（关闭声音）。

上面的元素可以使用：opacity 设置透明度
测试，黑色为底色，0.8±的效果最好

29.【关于路由】
在/router/index.js文件中，配置完路由之后必须加一个 export default router 将它导出（和模块导出一个意思）
否则main.js（主要配置）中导入失败则无法跳转

举个常用栗子：<router-link :to="{name:'Collect'}">  
//可以是name也可以是path，需要注意的是如果路由跳转是给按钮的，
//一定要把按钮包含其中，只包裹文字的话路由链接会在文字上，又丑又不方便

30.【get/post请求，想后台服务器获取/传输数据】
【解决跨域问题】
注意事项：Vue2.0和Vue3.0的api配置写法不一样！！！！
主要需要解决的就是跨域问题，可以使用api代理

proxyTable相关
详细链接:https://blog.csdn.net/weixin_44116302/article/details/105420071）

----------------------1.配置文件-----------------------------------------------------------------
Vue3.0是在vue.config.js文件中输入：（Vue2.0中没有这个文件）

module.exports = {
    devServer: {
        proxyTable: {
            '/api': {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                target: 'http://39459fr368.zicp.vip',
                // 允许跨域
                changeOrigin: true,
                // ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

----------------------1.配置文件-----------------------------------------------------------------
Vue2.0是在config/index.js中修改proxyTable配置：（这里是截取的修改片段）

// Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        // 此处的写法，目的是为了 将 /api 替换成 http://39459fr368.zicp.vip
        target: 'http://39459fr368.zicp.vip',
        // 允许跨域
        changeOrigin: true,
        // ws: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    },

----------------------2.在页面中定义方法-------------------------------
举个栗子：

<script type='module' type="text/javascript">  
//说明这一段脚本语言是javascript,浏览器默认就是js，但为了更好的容错最好还是写上

export default{
  name:"test",
  data() {
      return {
          content:'test',
          jokes:[]
      }
  },
  methods: {                     //从这段开始
      getData(){ 
          this.$axios.get("http://39459fr368.zicp.vip/readInfo")     //get方法，向网址get数据
          .then( res=>{
              console.log(res)     //在控制台中显示get到的内容
          })
      } ,
      PostData(){
          this.$axios.post("/api/writeInfo",      //post方法，向网址发起post请求，插入数据
          {
              "username":"lj",                           //需要插入的内容
              "password":"2023",
          },
          {
              headers:{'contentType':'application/json',}         //设置头部（也是为了跨域问题）
          }).then(res =>{                           
              console.log(res.data)               //输出post的数据
          }).catch(err =>{
              alert('请求失败')                       //可有可无，这是一个错误提示
          })
        
      }
  },

}
</script>

左揽新月

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
VUE初始--学习笔记

记录一点杂七杂八的学习笔记，初学时写的，暂时就不分类了。杂七杂八往这堆堆。其实也能算是js笔记。1.【props】：道具，用来接收父组件中的数据，其值为数组（即从父元素传给子元素）举例子：props:[‘name’] //接收父组件中的name注意，props是从上到下的单向数据传递，反之则不行【注意-驼峰命名法】使用驼峰命名法时，要记得转化字符间的-。简单例子：isName会自动转换成is-name，如果直接使用isName，会报错显示未定义。在这个案例中的例子： props:[‘s.
复制链接

扫一扫