vue学习笔记-自用

最新推荐文章于 2023-07-24 11:35:07 发布

陌上烟雨寒

最新推荐文章于 2023-07-24 11:35:07 发布

阅读量350

点赞数

分类专栏： vue 文章标签： vue vue.js javascript css html

本文链接：https://blog.csdn.net/weixin_47180815/article/details/108076571

版权

vue 专栏收录该内容

45 篇文章 2 订阅

订阅专栏

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

el: '#app',绑定根视图
components: { App }, 加载组件
template: '<App/>' 使用组件

模板语法

插值

1. 文本
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

<span>Message: {{ msg }}</span>

2. 纯 HTML
v-html：为了输出真正的 HTML ，你需要使用 v-html 指令
3. 属性

<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="someDynamicCondition">Button</button>

4. 使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令

1. 参数
2. 动态参数

<a v-bind:[attributeName]="url"> ... </a>

3. 修饰符

缩写

v-bind 缩写 :

v-on 缩写 ‘@’

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else
v-else-if
用 key 管理可复用的元素

v-show

v-if vs v-show

v-if 与 v-for 一起使用

列表渲染

用 v-for 把一个数组对应为一组元素

 <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>>

在 v-for 里使用对象

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

维护状态
数组更新检测
变更方法
替换数组
注意事项
显示过滤/排序后的结果
在 v-for 里使用值范围
在上使用 v-for
v-for 与 v-if 一同使用
在组件上使用 v-for

事件处理

监听事件
事件处理方法
内联处理器中的方法
事件修饰符
按键修饰符
按键码
系统修饰键
.exact 修饰符
鼠标按钮修饰符
为什么在 HTML 中监听事件？

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

event 事件对象

methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

Vue双向数据绑定

v-model

基础语法

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

值绑定
修饰符

.lazy
.number
.trim

Class 与 Style 绑定

绑定 HTML Class

对象语法

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

用在组件上

绑定内联样式

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自动添加前缀
多重值

计算属性

计算属性缓存 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

Vue组件基础

父子组件的传值

father

<hr />父子组件之间的传值
<SON v-on:sendmsg="getSonMsg" msg1="给父亲" v-bind:msg2="msg"></SON>
<SON v-on:sendmsg="sonMsg=$event" msg1="给父亲" v-bind:msg2="msg"></SON>
sonMsg：{{sonMsg}}

getSonMsg: function (data) {
	console.log(data);
},

son

 <button v-on:click="$emit('sendmsg', toFather)">button</button>

插槽

子组件

<slot v-bind:msg="msg" name="hello"></slot>
<slot v-bind:msg="msg" name="world"></slot>

父组件

<useSlot>
  	<p slot="hello">具名插槽</p>
  	<p slot="world" slot-scope="slotProps">具名插槽 | slotProps.msg:{{slotProps.msg}}</p>
</useSlot>

动态组件

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

自定义指令

main.js中

//自定义全局指令
Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
})

使用

<input v-focus type="text" />

局部指令

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

过滤器

全局

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

局部

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

axios的使用

npm install --save axios

在main.js中引入

import Axios from 'axios'
Vue.prototype.$axios = Axios;

get 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

注意点：get请求传递的参数是名是params，post是data

post 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(res=>{
		console.log(res);
	})
  .catch(function (error) {
    console.log(error);
  });

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios的post请求接受的参数是form-data格式：?name=zpp&age18
解决的·方案是

import qs from 'qs'
axios.post('/user', qs.stringify({
	firstName: 'Fred',
    lastName: 'Flintstone'
}))
  .then(res=>{
		console.log(res);
	})
  .catch(function (error) {
    console.log(error);
  });

请求配置
transformRequest

// `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理

    return data;
  }],

可以通过return qs.stringify(data);处理一下data
注意：只能用在 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if(config.method === "post"){
    	config.data = qs.stringify(config.data);
	}

    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    if(response.status !== 200){
		return;
	}
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

Vue-axios跨域处理
config 中的 index.js文件

proxyTable: {
      '/gitapi': {
        target: 'https://api.github.com', // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
          '^/gitapi': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },

```、
使用

```javascript
testGitReq: function () {
      this.$axios
        .get("/gitapi/users")
        .then((res) => {
          this.gitUser = res.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },

操作原声DOM

<p ref="myp"></p>

var myp = this.$refs.myp
myp.addEventListener("click",function(){
	"hai"
})

vue-router

路由的使用

1.引入
2.创建Router
3. 注入router
4.显示

//引入
import VueRouter from 'vue-router'
import HelloWorldfrom './components/HelloWorld'
Vue.use(VueRouter)

//2.创建Router
consr router = new VueRouter({
	routes:[
		{
			path:"/hello",
			component:HelloWorld
		}
	]
})


//注入
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

<router-view />

项目没有默认装路由的情况

在router 中的 index.js
在这里插入图片描述

router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。通过to属性指定目标地址，默认渲染成带有正确链接的<a> 标签，可以通过配置tag 属性生成别的标签.。

<router-link to="/foo" tag="li">foo</router-link>

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
}

路由嵌套

要在嵌套的出口中渲染组件，需要在 VueRouter的参数中使用 children 配置：
显示位置：父级在哪里，显示的位置就放在哪里

path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]

参数传递

配置路由信息

path:"/hi/:id/:count"
name:"hi"

配置路由跳转信息

<router-link to="{name:'hi',oarams:{id:'100',count:20}}" tag="li">foo</router-link>

读取信息

{{$router.params.id}}

路由高亮

设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。
linkActiveClass: "active",

vue中的插件使用

element-ui

https://www.swiper.com.cn/api/start/new.html

vuex

https://blog.csdn.net/weixin_47180815/article/details/108202812

陌上烟雨寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记-自用

/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})el: '#app',绑定根视图components: { App }, 加载组件template: '<App/>' 使用组件模板语法插值文本数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：<span>Mes
复制链接

扫一扫