vue.js的复习操作

最新推荐文章于 2024-09-16 15:56:04 发布

Yan_Gold_forget

最新推荐文章于 2024-09-16 15:56:04 发布

阅读量183

点赞数

文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/Yan_Gold_forget/article/details/129307037

版权

本文介绍了Vue.js的基础知识，包括使用vue-cli创建项目，v-if和v-else的条件判断，v-for的循环语句，以及计算属性、事件处理器、v-model的双向数据绑定等核心概念。还涉及到组件间的通信，如prop和自定义事件，以及Vue.js的自定义指令和响应式接口的使用。最后提到了Ajax和axios在数据交互中的应用。

摘要由CSDN通过智能技术生成

在此就不重复vue.js是什么了，直接上手

首先用npm装vue的脚手架

即全局安装vue-cli用这条命令：npm install --global vue-cli

然后就可以开始操作项目了：通过cmd进入终端然后输入vue create 项目名，开始创建项目

这样在那样就完成了

以下是一些vue的知识点

条件判断

v-if

条件判断使用 v-if 指令：

<div id="app">
    <p v-if="seen">这玩意有点多</p>
    <template v-if="ok">
      <h1>我爱JR</h1>
    </template>
</div>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

<div id="app">
    <div v-if="Math.random() > 0.5">
      补考必过
//就是该随机数大于0.5就显示补考必过，否则就显示。。。
    </div>
    <div v-else>
      老师，菜菜，捞捞
    </div>
</div>

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据

v-for 迭代整数

    <div id="app">
        <!-- 输出变量的值 -->
        <!-- <p>{{msg}}</p> -->
        <!-- <p> {{ age }} </p>
        <p> {{ age + 200 }} </p>
        <-- 字符串需要引号 -->
        <!-- <p> {{ age >= 18 ? '成年' : '未成年' }} </p> -->
        <!-- 纯文本,遇标签不会解析 -->
        <!-- <div v-text="msg">原来的</div> -->
        <!-- 遇标签会解析 -->
        <!-- <div v-html="msg">原来的</div> -->
        <!-- 插值语法遇到标签也不会解析,纯文本,不会覆盖原本 -->
        <!-- <div>
            原本的{{ msg }},后面
        </div> -->
        <!-- 获得输入的内容 -->
        <input type="text" v-model="msg">
    <button @click = "msg = 'hao' "></button>
    <select v-model="animal">
        <option value="dog">张</option>
        <option value="duck">毅</option>
        <option value="pig">凡</option>
 
    </select>
     <input type="checkboc" v-model ="cku">
    </div>
    <!-- 导入vue.js -->
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:"#app",
            data:{
                msg:"张翔xxx"
            }
        })
    </script>

Vue.js 计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子

Vue.js 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
 
<div v-bind:class="{ 'active': isActive }"></div>

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

 
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

输入框

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

<div id="app"> 
<p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> 
<p>消息是: {{ message }}</p> <p>textarea 元素：</p>
 <p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea> 
</div>
 
<script>
new Vue({ 
    el: '#app', 
    data: { message: 'baidu', message2: '百度\r\nhttp://www.baidu.com' } }) </script>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

以下实例中演示了复选框的双向数据绑定：

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

Vue.js 组件 - 自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
 
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。

value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。

oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

ajax和axios

使用 npm:

$ npm install axios

1、什么是ajax？

AJAX（ Asynchronous JavaScript and XML）

A：异步； J：js； A:and; X:XML

指异步和JavaScript和XML结合的一种技术。

作用：ajax可以实现网页的异步更新，意味着可以不重新加载整个页面的情况下，对网页的某个部分进行更新。

axjx的组成：

异步的js事件

其他的js（用来处理解析数数据）

XMLHttpRequest对象

数据（txt、json、xml、html）

2、ajax请求原理

创建XMLHttpRequest实例对象；

设置回调函数；

通过XMLHttpRequest.open发出Http网络请求,和服务器端进行连接；

服务器端收到请求，发出请求的数据；

检查网络请求对象的状态，如果响应成功，浏览器接收返回的数据，并且更新页面。

3、什么是axios？

axios是通过Promise对ajax的封装，是一个基于Promise 的Http库，可以在浏览器和Node.js中使用。

简单理解为：axios是一个封装好的，基于Promise的发送请求的方法，不用设置回调，直接调用then方法。

4、axios有哪些特性

在浏览器中创建XMLHttpRequest对象；

在node.js中创建Http请求

支持拦截请求和响应

自动转换将响应为JSON格式

提供一些并发请求

5、ajax和axios的区别

axios是通过Promise实现ajax技术的一种封装，就像jquery对ajax的封装一样；

axios返回的数据是一个promise，ajax返回的数据是回调；

axios比ajax更加好用，更加安全；

简单来说就是，ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。

axios是ajax，ajax不止axios。

6、get请求提交参数

1.实例化一个请求对象

2.调用open方法，设置请求方式和请求地址

3.设置请求完成后到回调函数

4.调用send方法，完成请求

语法: url? key = value
 
          url? key1 = value1&key2 = value2&key3 = value3
 
<script>
 
    // 1.实例化一个请求对象
 
    let xhr = new XMLHttpRequest
 
    // 2.调用open方法，设置请求方式和请求地址
 
    xhr.open('get','https://autumnfish.cn/api/joke/list?num=10')
 
    // 3.设置请求完成后到回调函数
 
    xhr.onload = function(){
 
        // console.log(xhr.response);
 
        // xhr.response是服务器响应回来的内容
 
        // JSON.parse方法是将响应回来的JSON对象转为普通的JS对象
 
        let jokes = JSON.parse(xhr.response)
 
        console.log(jokes);
 
    }
 
    // 4.调用send方法，完成请求
 
    xhr.send()</script>

7.AJAX发送post请求

1.实例化一个请求对象

2.调用open方法，传递请求方法及请求地址

3.设置请求头

4.设置请求成功后回调函数

5.发送请求

get请求传递参数：直接在url地址后拼接，安全性不高

post请求传递参数：在send()方法里传递

<script>
 
        // 1.实例化一个请求对象
 
        let xhr = new XMLHttpRequest
 
        // 2.调用open方法，传递请求方法及请求地址
 
        xhr.open('post','https://autumnfish.cn/api/user/register')
 
        // 3.设置请求头
 
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
 
        // 4.设置请求成功后回调函数
 
        xhr.onload = function() {
 
            // console.log(xhr.response);
 
 
 
            let obj = JSON.parse(xhr.response)
 
            console.log(obj);
 
        }
 
        // 5.发送请求
 
        // 请求格式 :'key= value'
 
        xhr.send('username=nana')
 
</script>

Vue.js 响应接口

Vue 可以添加数据动态响应接口。

例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。

实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
setTimeout(
    function(){
        vm.counter += 20;
    },10000
);
</script>

vue博大精深吾所讲述不过沧海一粟，汝若学会切记戒骄戒躁。