vue 学习

Posted 2021-11-02 思想累积

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 学习相关的知识，希望对你有一定的参考价值。

vue 官网：https://cn.vuejs.org/

vue 官方文档：https://cn.vuejs.org/v2/guide/

1、vue 下载：

https://cn.vuejs.org/v2/guide/installation.html

开发版本包含完整的警告和调试模式

生产版本删除了警告，33.46KB min+gzip

CDN：

对于制作原型或学习，你可以这样使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

2、vue 实例

2.1 在 html 文件中引入 vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

2.2 创建一个 vue 实例

<script type="text/javascript">
    var vm = new Vue({
        el : "#app",	// 绑定元素的 id
        data : {	// 数据对象中的属性，现在里面有个 message 的属性，初始值为 vue
            message:"vue"
        }
    })
</script>

2.3 将数据绑定到页面元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>

        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",	// 绑定元素的 id
                data : {	// 数据对象中的属性，现在里面有个 message 的属性，初始值为 vue
                    message:"vue"
                }
            })
        </script>
    </body>
</html>

页面展示效果：

在控制台输入 vm.message = "hello Vue" ，浏览器显示内容会变成控制台输入的内容，我们没有主动操作DOM，就使页面的内容发生了变化，借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

3、vue 模板语法

3.1 插值

文本：使用双大括号 {{}} 进行插值
```
<span>Message: {{ msg }}</span>
```
HTML：使用 v-html 插入 HTML
```
<span v-html="rawHtml"></span>
```
Attribute：使用 v-bind 指令绑定元素特性
```
<div v-bind:id="dynamicId"></div>
```

使用 JavaScript 表达式

{{ number + 1 }}

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

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

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

3.2 指令

v-bind 绑定元素特性
```
<span v-bind:title="message">
```
v-on 监听 DOM 事件，触发时运行一些 JavaScript 代码
```
<a v-on:click="doSomething">...</a>
```

3.3 缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

3.4 条件渲染

v-if 指令的表达式返回 true 值的时候被渲染，可以配合 v-else v-else-if 使用
```
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
```
v-show 根据条件展示元素
```
<h1 v-show="ok">Hello!</h1>
```

3.5 列表渲染

v-for="item in items" 基于一个数组来渲染一个列表 items 是源数据数组，item 是数组元素的别名

<ul id="example-1">
    <li v-for="item in items" :key="item.message">
        {{ item.message }}
    </li>
</ul>
<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
</script>

v-for 支持第二个可选参数，当前项的索引

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

也可以用 of 代替 in 作为分隔符

<div v-for="item of items"></div>

遍历对象

<div v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
</div>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
</script>

3.6 表单双向绑定

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本

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

多行文本（在文本区域插值 ( <textarea>{{text}}</textarea> ) 并不会生效）

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

单选框

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

复选框

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<script type="text/javascript">
    new Vue({
        el: '...',
        data: {
            checkedNames: []
        }
    })
</script>

单选按钮

<div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '#example-4',
        data: {
            picked: ''
        }
    })
</script>

下拉框

<div id="example-5">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
    new Vue({
        el: '...',
        data: {
            selected: ''
        }
    })
</script>

3.7 计算属性

computed 计算属性可以完成各种复杂的逻辑，包括运算、函数调用等，最后返回一个结果即可

<div id="app">
    <div>
        {{message}}
    </div>
    <div>
        {{newMessage}}
    </div>
</div>
<script type="text/javascript">
	var vm = new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        computed:{
            newMessage(){
                this.message; // 观察到 message 数据变化而变化
                console.log(new Date());
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

methods 中的方法名不能与 computed 中的计算属性重名。

3.8 内容分发

使用 <slot> 插槽作为分发内容的入口，将组件组合起来进行使用

<div id="app">
    <todo>
        <todo-title slot="todo-title" title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item,index in todoItems" :item="item,index"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\\
			<slot name="todo-title"></slot>\\
			<ul>\\
			<slot name="todo-items"></slot>\\
  			</ul>\\
   			</div>'
    });
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props:["item","index"],
        template:"<li>{{index+1}},{{item}}</li>"
    });

    var vm = new Vue({
        el:"#app",
        data:{
            title:"标题",
            todoItems:['item1','item2','item3']
        }
    });
</script>

3.9 自定义事件

数据项在 new 的 vue 实例中，组件中无法进行删除操作，vue 提供了 this.$emit('自定义事件', 参数) 进行参数传递和事件分发

在 vue 实例中添加删除方法

var vm = new Vue({
    el:"#app",
    data:{
        title_text:"标题",
        todoItems:['item1','item2','item3']
    },
    methods:{
        removeItems:function(index){
            this.todoItems.splice(index,1);
        }
    }
});

增加删除按钮并绑定事件

Vue.component("todo-items",{
    props:["item","index"],
    template:"<li>{{index + 1}},{{item}} <button @click='remove'>删除</button></li>",
    methods:{
        remove:function (index) { // 自定义事件名称，使用 $emit 自定义事件分发
            this.$emit('remove',index);
        }
    }
});


<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item, item" v-on:remove="removeItems(index)" :key="index"></todo-items>

4、组件

4.1 组件基础

vue 组件示例（组件是可复用的 Vue 实例，且带有一个名字。一个组件的 data 选项必须是一个函数，维护一份被返回对象的独立的拷贝）

Vue.component()：注册组件

button-counter：组件的名字

template：组件的模板

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

我们可以在一个新的 new Vue 实例中把组件作为自定义元素使用

<div id="components-demo">
    <button-counter></button-counter>
</div>
<script>
    new Vue({
        el: '#components-demo'
    })
</script>

组件复用（以将组件进行任意次数的复用）

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

通过 prop 向子组件传递数据（我们需要传递参数到组件）

prop

<script>
    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    })
</script>
<!--一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来 -->
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

单个根元素

<script>
    Vue.component('button-counter', {
        props:['title', 'content'],
        template: '<h3>{{title}}</h3> <div>content的值为：{{content}}</div>'
    })
</script>

如果模板这样写，vue 会报错 Component template should contain exactly one root element 每个组件必须只有一个根元素，我们需要将模板内容包裹在一个父元素内解决这个问题

<script>Vue.component('button-counter', {
        props:['title', 'content'],
        template: '<div>'
        + '<h3>{{ title }}</h3>'
        + '<div v-html="content"></div>'
        + '</div>'
    })
</script>

4.2 深入了解组件

组件注册

组件名（Vue.component 的第一个参数）
```
Vue.component('my-component-name', { /* ... */ })
```
组件名命名规则：字母全小写且必须包含一个连字符
全局注册（注册后可以在任何新创建的 Vue 实例中）
```
Vue.component('my-component-name', {
  // ... 选项 ...
})
```

局部注册（局部注册的组件在其子组件中不可用）

// 通过一个普通的 JavaScript 对象来定义组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

// 在 components 中选择要使用的组件
new Vue({
    el: '#app',
    components: {
        'component-a': ComponentA,
        'component-b': ComponentB
    }
})

Prop

Prop 类型

字符串数组形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

名称：类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

传递静态或动态 Prop

静态传值

<blog-post title="My journey with Vue"></blog-post>

使用 v-bind 动态赋值

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

Prop 验证

Vue.component('my-component', {
    props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
            type: String,
            required: true
        },
        // 带有默认值的数字
        propD: {
            type: Number,
            default: 100
        },
        // 带有默认值的对象
        propE: {
            type: Object,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
                return { message: 'hello' }
            }
        },
        // 自定义验证函数
        propF: {
            validator: function (value) {
                // 这个值必须匹配下列字符串中的一个
                return ['success', 'warning', 'danger'].indexOf(value) !== -1
            }
        }
    }
})

5、Axios 异步通信

5.1 什么是 Axios

Axios 文档：http://www.axios-js.com/

Axios 是个开源的可以在浏览器端和 node js 使用的异步通信框架，主要作用就是实现 AJAX 异步通信

重点是 vue-resoure 不更新维护，vue团队建议使用axios

5.2 Axios 特点

自动转换 JSON 数据
拦截请求和响应
转换请求数据和相应数据
从浏览器中创建 XMLHttpRequests，从 node.js 创建 HTTP 请求
…

5.3 Axios 使用

Axios 安装

// npm 安装
npm install axios --save-dev 
// 直接用 cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

// 超时时间
axios.defaults.timeout = 5000

axios.all({
    axios({
      url: '',
      params: {
      	"name" : "zhangsan"
    }
      methods: ''
    }),
    axios({
      url: '',
      params: {
    	"name" : "zhangsan"
	}
      methods: ''
    })
}).then(result => {
    console.log(result);
})

请求地址
url: "/s',
请求类型
method: 'get',
    请求根路径
baseURL: 'https://www.baidu.com'，
请求前的数据处理
transformRequest:[function(data){}],
    请求后的数据处理
transformResponse: [function(data){}].
自定义的请求头
headers:{'x-Requested-With: XMLHttpRequest'),
    参数
    params:{ wd: 111 },
        超时设置
        timeout: 1000,
            跨域是否携带 Token
            withCreatedentials: false,
                响应数据格式
         responseType: 'json'

以上是关于vue 学习的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家