vue基础总结

`Vue` 语法；

new Vue({
    //挂载；
    el: '#app',
    //初始化数据；
    data: {},
    //监听 data 的数据变化；
    watch: {
      todos: {
        //深度监视
			handler() {
				window.localStorage.setItem("todos",JSON.stringify(this.todos))
			},
			deep: true, //默认为false
		}
    },
    //计算属性；
    computed:{},
    //初始化完成要执行的方法；
    created() {},
    //要执行的回调函数；
    methods: {},
})

指令：

概念：在vue中，指令是带有v-前缀的特殊特性 ;

指令特性的值预期是单个JavaScript表达式(v-for除外)，责任就是，当表达式的值改变时，就响应式的作用于DOM，从而做出改变。

`v-if` :条件渲染；

根据绑定数据的真假来决定是否渲染这个元素；
属性值类型为布尔类型；
若属性值为空，则默认为true；
当属性值为false时，则隐藏被作用的元素对象；

<!-- 语法：-->
<div v-if='true'>我是第四个div</div>

`v-show` ：条件显示；

无论条件的真假始终都渲染元素；
- 元素会始终渲染，至于是否显示则取决于css；
属性值类型为布尔类型；
若属性值为空，则默认为false；
当属性值为false时，则隐藏被作用的元素对象；不显示（display: none）

<!--语法-->
<div v-show='false'>我是第三个div</div>

`v-text`：

可以在标签中插入一段文本；
无闪烁问题；

<!--语法-->
<p v-text="msg"></p>

{{msg1}} 插值表达式；
- 可以进行简单的逻辑运算；
  - {{ user.gender === 0 ? '男' : '女' }};
- 有闪烁问题；
- 可以通过v-cloak解决闪烁问题；并结合[v-cloak]{display: none;}来使用；

[v-cloak]{
   display: none;
  }

<p v-cloak>++++++++ {{ msg }} ----------</p>

闪烁：

当网速较慢时，此时的vue.js文件还未加载过来，但是此时页面已经显示了内容,当文件加载完毕后又进行了替换；

`v-html`：

在渲染时可以解析html标签；

<div v-html="msg"></div>

`v-bind` ：

1、用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。

2、可以简写为： :class="{w: true}" ；

为属性绑定用于vue操作；
v-bind:class="{w: true}" :主要用于应用 class 类样式；
- 属性 ：表示要应用的类样式；
- 属性值 ：为 true 应用，为false则不应用；
v-bind:style="{color: 'red',fontSize: '40px'}":主要用于设置css样式；
v-bind:style='obj1':此时的obj1为一个对象；

<!--语法-->
<p v-bind:class="{w: true}">我是一个p标签</p>
<p v-bind:style="{color: 'red',fontSize: '40px'}">我是一个大大的p标签</p>
<span v-bind:style='obj1'>我是span标签</span>
<!--绑定标准属性实现vue操作-->
<div id='asd' v-bind:title="title">我是div标签</div>

`v-else` ：

主要用于判断，可以参考if(){};
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

<span v-if="age>=78">{{adult}}</span>
<span v-else-if="age>=58">{{juveniles}}</span>
<span v-else="juveniles">{{juveniles}}</span>

`v-model` ：

1、双向绑定，即数据和视图的实时更新；

2、在内部为不同的输入元素使用不同的属性并抛出不同的事件；

当应用于text 和 textarea 元素时v-model将用于监听 value 属性值的变化并触发 input 事件；
当应用于checkbox 和 radio 元素时v-model 将用于监听checked 属性值的变化并触发 change 事件；
当应用于select 字段将 value 作为 prop 并将 change 作为事件。？？？
可以直接获取表单的文本内容；
当用于复选框

<input type="text" v-model="text">

修饰符：

.trim：
- 其作用是清空两端空白符；
- 注意：此时若监听text的值，则前面空格的输入不会触发监听函数的执行；
```
<input type="text" v-model.trim="username" /></li>
```
.lazy：
- 用于取代原先的 input事件，改为 change事件;
  - 不会在输入内容时触发事件了，而是在输入完毕后失去焦点时触发事件；
```

<input type="text" v-model.lazy="msg">
```
.number：
- 把数字字符转换为数字类型，若第一次输入的是数字则会触发change事件，若后面继续输入其它的字符则不会在触发change事件；
```
<input type="text" v-model.number="msg1">
```
.

事件修饰符：

.stop：
- 阻止事件冒泡；
```
<a v-on:click.stop="doThis"></a>
```
.prevent：
- 事件不再重载页面；
- 可以用于阻止submit的页面的默认跳转；
.self：
- 只当在 event.target 是当前元素自身时触发处理函数 ;
.once：
- 事件将只会触发一次；
.passive：
- 告诉浏览器你不想阻止事件的默认行为；

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

`v-on` ：

支持动态参数绑定；

用于事件的绑定；
v-on简写为@;

 <input @change="change" type="text" v-model="text">

`v-for` ：

用于循环遍历：

//当参数为 1 个时；为值；
<h3 v-for="key in arr">{{key}}</h3>

//当参数为 2 个时； 为值==键；
<p v-for="(value, name) in user"></p>

//当参数为 3 个时； 为值==键==索引；
<p v-for="(value, name, index) in user"></p>

值范围的遍历；
- 也可以接受整数。在这种情况下，它会把模板重复对应次数。
```
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
```
key的使用；
- key用作唯一的身份标识，用于告知浏览器，进行Dom的重新(创建)渲染，而不是复用；
- 在Dom节点的更新过程中，浏览器会识别key值的变化，然后判断是否进行Dom的重新渲染；

<body>
<div id="app">
  <button @click="ok">点击反转</button>
  <ul>
      <!--key 的值要唯一，key的值不能使用索引值，-->
    <li v-for="item in msg" :key="item.id">
      <span>{{item.name}}</span>
      <input type="text">
    </li>
  </ul>
</div>
</body>
<script src="../../libs/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: [
        {id: 1, name: "小明"},
        {id: 2, name: "小红"},
        {id: 3, name: "小李"},
        {id: 4, name: "小绿"}
      ]
    },
    methods: {
      ok: function () {
        //点击反转数组
        this.msg.reverse()
      }
    }
  })
</script>

例：

<div id='w'>
    //绑定事件 并获取表单内容；
    <input @change="change" type="text" v-model="text">
    <span>{{name}}今年</span>
    <span>{{age}}岁了</span>
    <span v-if="age>=78">{{adult}}</span>
    <span v-else-if="age>=58">{{juveniles}}</span>
    <span v-else="juveniles">{{juveniles}}</span>
    <!--循环遍历-->
    <h3 v-for="a in arr">{{a}}</h3>
</div>
</body>
<script src="./libs/vue.min.js"></script>
<script>
    new Vue({
        el: "#w",
        data: {
            text: "",
            name: '小明',
            age: '',
            adult: "成年了",
            juveniles: "未成年",
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
        methods: {
            change: function () {
                this.age = this.text;
            }
        }
    })

`v-once`：

只渲染元素一次;

<!--只渲染一次，点击事件的触发不会改变其内容；相当于禁用了响应式-->
<span v-once>{{msg}}</span>

`v-pre`：

所在元素不会被编译处理，可以理解为不被解析或渲染；

<!--此时的{{msg}}不会被解析-->
<span v-pre>{{msg}}哈哈哈</span>

计算属性：

1、模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护；

2、在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

3、计算属性禁用箭头函数 ；

4、计算属性自带缓存机制；

侦听器：

能够监听到数据的变化并执行特定的逻辑。
只要数据发生变化就执行相关的逻辑代码；

//深度监视；
todos: {
   handler() {
     window.localStorage.setItem("todos",JSON.stringify(this.todos))
    },
     deep: true, //默认为false
}

列表的更新：

遍历数组；

可以利用一些常用的数组的方法来更新数组；
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

<body>
<div id="app">
  <ul>
    <li v-for="item in arr">{{item}}</li>
  </ul>
</div>

</body>
<script src="../../libs/vue.js"></script>

<script>
  var vm=new Vue({
    el: "#app",
    data: {
      arr:[1,2,3,4,5,6,7,8,9],
    }
  })
</script>

注意，以下两种情况都不会更新视图：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

vm.items.splice(newLength)；

// Vue.set
// 参数1： 实例的数组
// 参数2：索引
// 参数3：你要修改的那个数据新值
Vue.set(vm.items, indexOfItem, newValue)

//例： Vue.set(vm.arr, 6, 100)

遍历对象；

<div id="app">
    <ul>
      <li v-for="item in msg">{{item.id}}--{{item.title}}</li>
    </ul>
    <!--如果obj对象中没有初始化的对象成员name，那么对象的修改不会响应到视图中-->
    <h1>{{obj.name}}</h1>
</div>

<script>
  var vm =new Vue({
    el: "#app",
    data: {
      msg: [
          //初始化的数据可以正常遍历；
        { id: 1, title: '吃饭1' },
        { id: 2, title: '吃饭2' },
        { id: 3, title: '吃饭3' },
        { id: 4, title: '吃饭4' }
      ],
        //空对象；
      obj: {},
    }
  })
</script>

对象的更新：

已经初始化的数据可以直接对象.属性="值"的方式来进行数据的而更新；
未初始化的数据可以采用重新赋值的方式进行数据的更新：app.obj={"name": "小明"}；

未初始化的数据可以采用vue提供的方法来进行数的更新；

// 参数1：实例的数据对象
// 参数2：属性名（注意：属性名是一个字符串）
// 参数3：属性值
Vue.set(vm.userProfile, 'age', 27)

Vue.set(vm.obj,"name","小明")

`template` 遍历渲染：

当需要遍历多个元素而又不想增加额外的元素节点的时候，可以结合 Vue 中提供的 template 遍历渲染；

结合v-for使用；
可以结合v-if使用；
不能结合v-show使用；
渲染的结果template标签不会在Dom中出现；

注：注意：template 上不能使用 key，要把 key 加到真实的 DOM 节点

<body>
   <div id="app">
    <button @click="ok">点击反转</button>
    <template v-for="item in msg">
      <div :key="item.id">
        {{item.name}}
        <input type="text">
      </div>
    </template>
  </div>
</body>

<script>
  new Vue({
    el: "#app",
    data: {
      msg: [
        {id: 1, name: "小明"},
        {id: 2, name: "小红"},
        {id: 3, name: "小李"},
        {id: 4, name: "小绿"}
      ]
    },
    methods: {
      ok: function () {
        //点击反转数组
        this.msg.reverse()
      }
    }
  })
</script>

`axios` ;

概述：是一个基于 Promise 的第三方 HTTP 客户端请求库，可以用于浏览器或者 Node.js。

封装了 HTTP 请求功能。可以运行在任何支持 JavaScript 环境的平台。

支持 Promise；
支持请求拦截和响应拦截
支持转换请求和响应数据
支持取消请求
自动转换 JSON 数据;
客户端支持防止 XSRF；

axios 依赖原生的 ECMAScript 6 Promise 支持。

如果浏览器不支持 ECMAScript 6 Promise，可以使用es6-promise 进行兼容处理。

基本使用；

安装；

npm install axios

axios({ // 配置请求相关数据信息
      method: 'GET', // 请求方式
      url: 'http://localhost:3000/users', // 请求路径
      // params: {}, // Query 参数   只有get请求需设置
      // data: {} // Body 参数
    }).then(function (res) {
      // res 是响应对象
      // 接口返回的数据再 res.data 中
      //    config: {url: "http://localhost:3000/users", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
      //      本次请求配置信息对象，很少使用
      //    data: [{…}]
      //      真正的响应结果数据
      //    headers: {cache-control: "no-cache", content-length: "84", content-type: "application/json; charset=utf-8", expires: "-1", pragma: "no-cache"}
      //      响应头数据，很少使用
      //    request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
      //      请求对象，几乎不适用
      //    status: 200
      //      响应状态码
      //    statusText: "OK"
      //      响应状态短语
      console.log(res.data)
    })

配置 `baseUrl`

// 配置请求的基础路径
axios.defaults.baseURL = 'https://api.example.com'

错误处理；

axios({
  method: 'PATCH',
  url: '/users/2',
  data: {
    name: 'abc'
  }
}).then((res) => { 
  // 成功执行 then
  // 在 axios 中，默认只有 >=200 和 <400 的状态码都认为是成功的
  // axios 在请求失败以后就不执行 then 里面的代码了
  console.log('请求结果 => ', res)
}).catch(err => { 
   // 失败执行 catch
  console.log('请求失败了', err)
  window.alert('更新失败，请稍后重试！')
})

组件；

概述：优化页面结构，简化开发过程；

组件特点：

简单、高效、不重复；

组件是一个特殊的 Vue实例；Vue实例有的组件基本都有；

组件没有el ,但是有template 组件页面结构；

注意：

组件中data为一个函数没有el选项；

组件的data是一个带返回值的函数;

template代表其页面结构 (有且只能有一个根元素)；

每个组件都是独立 数据逻辑没有任何关联；

语法；

<div id="app">
  
  
  <eight-eight></eight-eight>
  <eight-eight></eight-eight>
</div>

 Vue.component("组件名称", {
    // 组件对象
    template: ``,
    data: function () {
      return {name: "字节跳动"};
    },
    methods: {},
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    }
  });
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {}
  });

全局组件；

注册组件名称推荐小写字母加横向的结构；
全局组件注册应该放在Vue实例化之前 ;
全局组件创建后，新创建的Vue实例也可以使用；
加减进步器案例；

<div id="app">
  <step-counter></step-counter>
  <step-counter></step-counter>
</div>

<div id="app1">
    新创建的VUE实例也可以直接使用
  <step-counter></step-counter>
</div>

<script>
  Vue.component("step-counter", {
    // 页面结构
    template: `<div>
        <button @click="cut">-</button>
        <span>{{count}}</span>
        <button @click="add">+</button>
        </div>`,
    data() {
      return {
        count: 0
      };
    },
    methods: {
      cut() {
         //简化写法，如果前面的不执行，则后面的也不执行，否则执行；
        this.count && this.count--;
      },
      add() {
        this.count++;
      }
    }
  });
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {}
  });
    
 	var vm = new Vue({
    el: "#app1",
  });
</script>

局部组件；

局部组件只能在当前实例上注册；

<div id="app">
  <abc-d></abc-d>
  <abc-d></abc-d>
</div>

<script>
  // 局部组件需要在当前实例上注册
  var vm = new Vue({
    el: "#app",
    components: {
      // key(组件名称):value(组件对象)
      "abc-d": {
        template: `<p>我最牛</p>`,
      }
    }
  });
</script>

组件嵌套；

组件嵌套就是在组件中使用其他组件;

一旦形成组件嵌套 ,就有了父子关系 ;

组件嵌套最多不要超过三级；

嵌套组件不要跨级访问；

组件名称最好采用小写或驼峰命名法；

<div id="app">
  <abc-p></abc-p>
   <!--<edf></edf>-->
</div>

<script>
  //创建全局组件；
  Vue.component("edf", {
    template: `<p style='color:blue'>我是一个全局组件edf</p>`
  });
  Vue.component("abc-p", {
    template: `<div>
        我是一个全局组件abc-p
          <child></child>
          <edf></edf>
          <!--<qwe></qwe> 跨级访问不到 -->
        </div>`,
    components: {
      child: {
        template: `<div style='color:red'>
            我是一个局部组件child
            <qwe></qwe>
            </div>`,
        components: {
          qwe : {
            template: `<div style="color:chartreuse">我式第二个局部组件</div>`
          }
        }
      }
    }
  });
  var vm = new Vue({
    el: "#app",
  });
</script>

组件通信；

父组件 =》子组件需要将数据传给子组件
子组件 =》父组件如果父组件需要子组件也可以传数据给父组件
兄弟组件1 =》兄弟组件2 ;

父组件传值Props；

注意: 父组件传递给子组件的数据是只读的,即只可以用,不可以改

用props完成父组件给子组件传值传值的属性都是定义在子组件的标签上,可以采用v-bind的形式传递动态值

定义props属性在标签上定义属性 v-bind传递动态值

在子组件中声明接收的属性

在子组件中使用组件记住属性只可以用不可改

1. props是组件的选项  定义接收属性
2. props的值可以是 字符串 数组 props:["list"]
3. props数组里面的元素称之为prop(属性) 属性=?值
4. prop的值来源于外部的(组件的外部)
5. prop(我们这里是lists)是组件的属性->自定义标签的属性
6. prop的赋值位置(在使用组件时,通过标签属性去赋值)
7. prop的用法和data中的数据用法一样

<div id="app">
  <!-- Vue实例 就是food-meat的父 -->
  <!-- 1.定义属性 => 给谁传就在谁的标签上写属性 属性名随便写-->
  <food-meat :foods="list" a="1" b="2"></food-meat>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      list: ["红烧肉", "回锅肉", "四喜丸子", "刀削面"]
    },
    components: {
      "food-meat": {
        //   2 接收属性  props => 字符串/数组
        template: `
            <div>
              我是饭--{{foods}}{{b}}
              <button @click="oncl">按钮</button>
            </div>`,

        props: ["foods", "b"],  // props可以是数组  也可以是对象

        methods: {
          oncl() {
            console.log(this.foods,this.b,this.list,this instanceof Vue)
            // this.foods
            // 1、this指向当前组件实例 this.属性 不能直接拿到 data中的数据 ；
            // 2、拿到data中所有的数据,需要传值才能拿得到
            // 3、也可以拿到 props传递过来的所有属性
            // 3、this 也可以拿到 当前methods所有的方法
            // 3、this 也可以拿到所有的计算属性
          },
        }
      }
    }
  });
</script>

SPA;

传统模式每个页面及其内容都需要从服务器一次次请求如果网络差, 体验则会感觉很慢；

spa模式, 第一次加载会将所有的资源都请求到页面 模块之间切换不会再请求服务器；

优点；
- 用户体验好,因为前段操作几乎感受不到网络的延迟；
- 完全组件化开发 ,原来属于一个个页面的工作被归类为一个个组件.；
缺点；
- 首屏加载慢->按需加载 不刷新页面只请求js模块
- 不利于SEO->服务端渲染；
- 开发难度高(框架) ；

实现原理；

* 可以通过页面地址的锚链接来实现spa;
* hash(锚链接)位于链接地址 `#`之后;
* hash值的改变`不会触发`页面刷新;
* hash值是url地址的一部分,会存储在页面地址上 我们可以获取到;
* 可以通过`事件监听`hash值得改变;
* 拿到了hash值,就可以根据不同的hash值进行不同的`模块切换`;

路由-`vue-router`；

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌 它是一个插件

Vuejs中不包含vue-router

实现根据不同的请求地址而显示不同的组件

如果要使用 vue开发项目,前端路由功能必须使用vue-router来实现

使用步骤 ;

导入vue和vue-router;

<script src="./vue-router.js"></script>

设置HTML中的内容;

<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>

<!-- 路由匹配到的组件将渲染在这里 -->
<!--定义容器-->
<router-view></router-view>

创建组件;

// 创建组件
// 组件也可以放到单独的js文件中
var Home = {
template: '<div>这是Home内容</div>'
};
var Users = {
template: '<div>这是用户管理内容</div>'
};

实例化路由对象,配置路由规则;

// 配置路由规则
var router = new VueRouter({
routes: [
{ name: 'home', path: '/', component: Home },
{ name: 'users', path: '/users', component: Users }
]
});

vue实例挂载router实例;

var vm = new Vue({
el: '#app',
router
});

`vue-router`-动态路由;

点击列表页 跳转到详情页时,跳转的链接需要携带参数,会导致path不同；

当path不同却需要对应同一个组件时,需要用到动态路由这一概念；

动态路由传参 => 列表 =>详情 => 动态路由id传过去；

注意动态路由的参数可以通过 vue实例.$route.params获取;

动态路由传参；

{ name: 'users', path: '/users/:id', component: Users },

通过传参，在路径上传入具体的值;

<router-link to="/users/120">用户管理</router-link>

在组件内部使用this.$route 获取当前路由对象;

var Users = {
   template: '<div>这是用户管理内容 {{ $route.params.id }}</div>',
   mounted() {
       console.log(this.$route.params.id);
   }
};

`vue-router-to`属性赋值；

to 有多种赋值方式 ;

<!-- 常规跳转 -->
      <!-- <router-link to="/sport">体育</router-link> -->
      <!-- 变量 -->
      <!-- <router-link :to="path">体育</router-link> -->
      <!-- 根据对象name跳转 -->
      <!-- <router-link :to="{name:'abcdefg'}">体育</router-link> -->
      <!-- 根据对象path跳转 -->
      <!-- <router-link :to="{path:'/sport'}">体育</router-link> -->
      <!-- 带参数的跳转 -->
      <router-link :to="{name:'abcdefg',params:{a:1}}">体育</router-link>

posted @ 2020-02-27 20:31 古怪精灵阅读(265) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

王亚威

vue基础总结

Vue 语法；

指令：

v-if :条件渲染；

v-show ：条件显示；

v-text：

v-html：

v-bind ：

v-else ：

v-model ：