Vue学习之基础一

最新推荐文章于 2023-04-02 11:15:07 发布

wwww....

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量123

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44779945/article/details/103645542

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue特点

Vue是一个MVVM框架
- M 模型 model 数据
- V 视图 view
- VM C -> P -> VM 视图模型 -> 处理逻辑
单向数据流
- 数据由父级传递给子级
Vue是一个js渐进式框架
- 渐进式：越学越难
- 想学的容易：加强基础
Vue是使用了虚拟DOM技术
Vue拥有便利性的指令
- 指令：操作dom的一种方式
Vue拥有组件系统
- 组件：组件是一个html、css、js的一个聚合体

Vue的使用

Vue可以通过两种方式引入

vue可以模块化使用，可以使用npm安装，因为它使用了amd的define来定义模块

vue可以以标签化引入,外部文件引入

HelloWorld案例示范

//先引入Vue，会得到一个全局变量Vue，是一个构造函数
<script src="./Vue.js">  
//将一个已有Dom作为Vue的实例范围 ——> #app 
<body>
	<div id="app"> 
		//要想在dom结构中书写js，那么我们的需要一个插值表达式，也就是{{}}
		<h3> {{ info }} </h3>
		//采用省略this的写法，这里的this指代的就是Vue的实例化对象
		//<h3> {{ this.info }} </h3> 
	</div>
</body>
//实例化Vue
<script>
	new Vue({
		el:"#app",  //Vue实例范围
		data:{
			info:'消息'
			//data存放数据，在Vue实例范围内相当于全局变量
		}
	})
</script>

Vue数据响应

称呼：深入响应式原理、双向数据绑定原理
数据响应指的是：当数据改变时，视图也会随之改变 ,当用户输入信息时，数据也改变了

Vue数据响应式原理？

Vue是通过使用ES5的 Object.defineProperty 中的 getter 和 setter 来对 data选项进行数据劫持的，所以只有在 data选项中定义的数据才会响应

<body>
<button> 数据改变 </button>
<div class="box"></div>
</body>
<script>
/* 
	* vue响应式原理的实现
	*   Object.defineProperty 中的  getter 和 setter  做的数据劫持
*/

const box = document.querySelector('.box') 
const btn = document.querySelector('button')

const data = {
	msg: ''
}

btn.onclick = function () {
	data.msg = '起床'
}

// Object.defineProperty( 哪一个对象，这个对象的某一个属性， 属性的描述符 	)

Object.defineProperty( data, 'msg', {
	get () { // get是做初始化赋值的
  		return 'aa'
	},
	set ( val ) {// set是完成数据的重新设置，也就是修改
  		console.log('val',val ) //val是视图重新输入的值
  		box.innerHTML = val 
  		return ;
	}
})
box.innerHTML = data.msg 
</script>

Vue指令

数据绑定 v-html 和 v-text

v-html 能够解析html标签
v-text

 <p v-html = "msg"></p>    // 能够解析html标签
 <p v-text = "msg"></p>      //不能

单项数据绑定 v-bind（简写为：）

绑定数据

<img v-bind:src = "imgUrl" alt="">
<img :src = "imgUrl" alt="">

绑定类名

 <!-- <p :class = "{类名：布尔值 }"> 对象形式 </p> -->
 <p :class = "{ size: flag,bg: true }"> 对象形式 </p>
 <p :class = "[ 'size',flag && 'bg' || 'blue' ]"> 数组形式 </p>  //size和bg均为类名
 <p class = "btn" :class = "['size','bg']"></p>  //不影响btn类名
 <p :class = "{[ a ]: true,[ b ]: true }"></p>    //data中 { a:'size',b:'bg' }

绑定行内样式

<p style = "width: 100px;height: 100px;background: green;"></p>
<p :style = "{
width: '100px',
height: '100px',
background: 'purple'
 }"> 对象形式 </p>
<p :style = "[{ width: '200px',height: '200px' },{ background: 'yellow' }]"> 数组形式 </p>
<p :style = "[ chicun,yanse ]"></p>

条件渲染 v-if、v-else、v-else-if

<!-- 1. 单路分支  if(){} -->
  <p v-if = "5>3"> 单路分支 </p>
  <p v-if = "flag"> 单路分支 </p>
<!-- 2. 双路分支 if () {} else {}-->
  <p v-if = "flag"> 双路分支一 </p>
  <p v-else> 双路分支二 </p>
<!-- 3. 多路分支  if () {} else if () {} else {} -->

  <p v-if = "grade < 60 "> 不及格 </p>
  <p v-else-if = " grade >= 60 && grade < 80"> 良好 </p>
  <p v-else> 优秀 </p>

条件展示 v-show

<p v-show = "flag"> 条件展示 </p>  //

列表渲染 v-for

v-for = " (item,key,index ) of obj " :key = “index”
:key最好使用id,次之使用index
事件 v-on（简写为 @）

@事件类型 = ‘方法名’
双项数据绑定v-model 和一次性事件v-once

input文本输入框首选v-mode

Vue数据请求

axios (axios的返回值是一个封装对象，可以提高安全性的)

模拟数据请求
1. 自己模拟数据,注意：和后端字段必须一致
2. mock.js 来生成json数据
3. easymock
4. jsonserver - 如何使用
后端接口请求(put,delete实质上就是get请求)
- get
- post
  - json
  - 表单提交
- put
- delete

使用

axios.defaults.baseURL = 'http://localhost:3000'; // 开发环境
// axios.defaults.baseURL = 'http://10.31.159.178:3000'; // 生成环境一个
// axios.defaults.baseURL = 'http://localhost:3000'; // 测试环境
// axios.defaults.baseURL = 'http://localhost:3000'; // 上线环境
new Vue({
el: '#app',
data: {},
methods: {
  getMockData () {//模拟数据
    // axios.get()
    // axios.post()
    // axios(options)
    axios({
      // url: './data/myself.json',
      // url: 'http://localhost:3000/user'
      url: '/user',
      // methods: 'get'  默认就是get请求
    }).then( res => console.log( 'res',res ))
      .catch( err => console.log( err ))
  },
  postFn1 () {
  //  axios.post(url,{})
  const { username,password } = this 
  axios({
    url: '/users',
    method: 'POST',
    data: {
      username,
      password,
      token: '',//用于登录，一般要携带token
    }
  }).then( res => console.log( err ))
    .catch( err => console.log( err ))
 },
 postFn2 () {
   const p = new URLSearchParams() // 得到数据参数携带对象
   const { username,password } = this 
   p.append('username',username )
   p.append('password',password)
   axios({
     url: '/users',
     method: 'POST',
     data: p
   }).then( res => console.log( 'res',res ))
     .catch( err => console.log( err ))
 },
 put () {
  axios({
    url: '/users',
    method: 'PUT',
    params: {
      id: 1
    }
  }).then( res => console.log( res ))
    .catch( err => console.log( err ) )
 },
},
})

fecth

特点

原生js提供，可以说ajax封装版本，用起来简易
符合模块化思想
在浏览器中呈现的fetch字样
fetch也是promise
fetch返回值是没有经过封装的，安全度比axios要低

使用

new Vue({
 el: '#app',
 data: {},
 methods: {
   mock () {
     // fetch( url,options )
     fetch(`${ baseURL }/user`)
       .then( data => data.json() ) // 数据格式化    json()  text()   blob() 二进制格式化
       .then( res => console.log( res )) // res就是得到的真正的数据
       .catch( err => console.log( err ))
   },
   get () {
     // const data = {
     //   word: 'jwj'
     // }
     fetch(`${ baseURL }/search?name=xige`,{
       method: 'GET'
     })
       .then( data => data.json() ) // 数据格式化    json()  text()   blob() 二进制格式化
       .then( res => console.log( res )) // res就是得到的真正的数据
       .catch( err => console.log( err ))
   },
   post () {
     fetch(`${ baseURL }/users`,{
       method: 'POST',
       headers: new Headers({
       // 指定提交方式为表单提交
         'Content-Type': 'application/x-www-form-urlencoded' 
       }),
       body: new URLSearchParams([["username", 'jwj'],["password", 123]]).toString() // 这里是请求对象
     })
       .then( data => data.json() ) // 数据格式化    json()  text()   blob() 二进制格式化
       .then( res => console.log( res )) // res就是得到的真正的数据
       .catch( err => console.log( err ))
   },
   postJSON () {
     fetch(`${ baseURL }/users`, {
       method: 'POST', // or 'PUT'
       body: JSON.stringify({
         username: 'jwj',
         password: 123
       }), // data can be `string` or {object}!
       headers: new Headers({
         'Content-Type': 'application/json'
       })
     }).then(res => res.json())
       .catch(error => console.error('Error:', error))
       .then(response => console.log('Success:', response));
     }
 },