前言

随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

1、vue.js介绍

1.1 MVVM模式介绍

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

1.2 单页面组件介绍及案例

文件扩展名为 .vue 的 single-file components (单文件组件) 为前端项目开发中遇到的一系列问题提供了解决方法。

这是一个文件名为 Hello.vue 的简单实例：

代码如下（示例）：

<template><!-- 模板，存放HTML标签 -->
</template><script>// Js 代码
export default {name: "Hello"}
</script><style>
/* css样式 */
</style>

1.3 插值表达式介绍及案例

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

代码如下（示例）：

<template><span>Message:{{msg}} </span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

1.2、数据渲染

1.2.1 v-text指令介绍及案例

v-text指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪烁问题：

代码如下（示例）：

<template><span v-text="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "Hello World",};},
};
</script>

1.2.2 v-html指令介绍及案例

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

代码如下（示例）：

<template><span v-html="msg"></span>
</template><script>
export default {name: "Hello",data() {return {msg: "
Hello World
",};},
};
</script>

1.2.3 v-if介绍及案例

v-if 指令用于条件性的渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候渲染
代码如下（示例）：

<template><div id="app"><p v-if="is_show">这是一个p标签</p><p v-if="is_have">我也是一个p标签</p></div>
</template><script>
export default {data(){return{is_show: true,is_have: false}}
}
</script>

• 在 JavaScript 中，true（真值）指的是在布尔值上下文中，转换后的值为真的值。
• 所有值都是真值，除非它们被定义为 假值（即除 false、0、“”、null、undefined 和 NaN 以外皆为真值）

案例：动态切换内容

<template><div id="app"><input type="radio" name="gender" value="男" v-model="msg">男<input type="radio" name="gender" value="女" v-model="msg">女<input type="radio" name="gender" value="人妖" v-model="msg">人妖<input type="radio" name="gender" value="保密" v-model="msg">保密<h2 v-if="msg == '女'">你是一个Girl</h2><h2 v-else-if="msg == '男'">你是一个Boy</h2><h2 v-else-if="msg == '人妖'">你是一个LadyBoy</h2><h2 v-else>你是一个神秘的人</h2></div>
</template><script>
export default {data(){return{msg: "保密",}}
}
</script>

1.2.4 v-show介绍及案例

• v-show 和 v-if 的用法和效果看起来是一样的

<template><div id="app"><input type="button" value="点击" @click="btn"><h2 v-show="a">嗨，我在</h2></div>
</template><script>
export default {data(){return{a: true}},methods:{btn(){this.a = !this.a}}
}
</script>

v-if和v-show异同介绍

• v-if 是控制元素是否在 DOM 渲染，实现显示和隐藏
• v-show 是控制元素的 CSS 属性 display，实现显示和隐藏

1.3 v-for

1.3.1 v-for介绍及案例

• v-for 可以循环遍历数据，并渲染出多个标签
• 在v-for指令操作里 a in b是必要格式
• v-for 可以循环遍历数据，并渲染出多个标签

<div id="app"><p v-for="i in 8">{{i}}</p>
</div>
在v-for指令操作里 a in b是必要格式v-for 可以循环遍历数据，并渲染出多个标签

1.3.2 循环数组介绍及案例讲解

遍历数组时，i 是数组中的值，k 是索引

遍历数组介绍及案例讲解 ★★★★
<template><div id="app"><p v-for="(i, k) in list_">{{i}} {{k}}</p></div>
</template>
<script>
export default {data(){return{list_: [2,4,6,8,10]}}
}
</script>

1.3.3 循环对象介绍及案例讲解

v-for 支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置

要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前

`v-for` 支持最多三个参数，同时获取遍历对象的`key`和`value`值，以及`index`索引位置要注意的是，此时的`key`和`value`和python中的顺序是颠倒的，`key`在后，`value`在前<template><div id="app"><p v-for="(value, key, i) in user">{{i}}--{{key}}--{{value}}</p></div>
</template><script>
export default {data(){return{user: {name: "张三",age: 18}}}
}
</script>

1.4v-on

1.4.1 v-on介绍及案例

v-on给元素绑定对应事件,可以缩写为@

<template><div><! -- <button v-on:click="btn">弹框</button> --><!-- 效果和上面等同 --><button @click="btn">弹框</button></button></div>
</template><script>
export default {methods:{btn(){alert(111)}}
}
</script>

1.4.2事件修饰符介绍与案例

1、 阻止冒泡 .stop介绍及案例讲解

• 比如一个按钮在一个div中,并且按钮和div均有自己的事件,那么此时点击按钮,事件会像冒泡一样从按钮开始一直到div进行触发,.stop用来阻止默认的事件触发行为

<template><div id="app"><p @click="pClick"><input type="button" value="按钮" @click.stop="btnClick"></p></div>
</template><script>
export default {methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

2 、阻止默认 .prevent介绍及案例讲解

• 比如像a标签这样的,在点击时他有默认的跳转动作,可以通过.prevent阻止该默认行为

<template><div id="app"><a v-bind:href="url" :id="msg + '123'" @click.prevent="aClick">百度 </a></div>
</template><script>
export default {name: 'one',data(){return{url: "http://www.baidu.com",msg:"bd"}},methods:{aClick(){console.log("链接被点击啦")}}
}
</script>

3、 捕获事件 .capture介绍及案例讲解

• 默认的事件触发处理机制是冒泡机制，通过.capture即可将冒泡顺序从里向外，颠倒顺序

• 也可理解为在冒泡机制中,谁有该修饰符，先触发谁的事件

<template><div id="app"><p @click.capture="pClick"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

4、 自身事件 .self介绍及案例讲解

• 与capture和冒泡不同,.self只有是自身触发的当前的事件才真正执行处理的回调函数

• 并且.self只会阻止当前元素的事件触发行为

<template><div @click="divClick" class="div1"><p @click.self="pClick" class="p1"><input type="button" value="按钮" @click="btnClick"></p></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{divClick() {console.log("盒子点击被触发了")},pClick() {console.log("p点击被触发了")},btnClick() {console.log("按钮点击被触发了")}}
}
</script>

5、 单次事件 .once介绍及案例讲解

• 使用.once只触发一次事件函数

<template><div id="app"><input type="button" value="提交" @click.once="btn"></div>
</template><script>
export default {name: 'one',data(){return{msg:'hello'}},methods:{btn(){alert(1111)}}
}
</script>

总结

1.了解MVVM开发模式
2.掌握Vue实例对象构造
3.掌握页面数据渲染
3.掌握v-for、v-on

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！