一使用环境: windows 7 64位操作系统

二 IDE:VSCode/PyCharm

三 Vue.js官网: https://cn.vuejs.org/

四下载安装引用

　　方式1:直接CDN引入(学习时使用)

　　<!-- 开发环境版本，包含了有帮助的命令行警告 -->

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

　　<!-- 生产环境版本，优化了尺寸和速度 -->

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

　　方式2:下载引入: https://cn.vuejs.org/v2/guide/installation.html

　　方式3:NPM按装(通过webpack和CLI使用)

说明: 基础学习用前两总方式使用,进阶时用方式3.

五开始学习

学习视频:https://www.bilibili.com/video/BV15741177Eh

===基本知识学习 ==========================

ES6相关的:

1.let(变量)/const(常量),在ES6开发当中优先使用常量const,只有需要改变某一标识符时才用let,常量const是指向的对象不能修改,但是const内部的属性可以改变.

2.export导出,import导入.

3.箭头函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>

</div>

<script>

    // 箭头函数

    const ccc = (参数列表) => {

    }

    // 2个参数求和,两种写法

    // 写法1

    const sum = (num1, num2) => {

        return num1 + num2

    }

    // 写法2

    const sum1 = (num1, num2) => num1 + num2

    // 1个参数取平方，不用加括号

    const powe = num => {

        return mum * num

    }

</script>

</body>

</html>

4.箭头函数的this是向外层作用域中，一层层查找this，直到this的定义。

(一) 声明式渲染

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CDN引入Vue -->

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

    <title>Document</title>

</head>

<body>

    <div id="app">

        <!-- 显示数据 -->

        {{msg}}

    </div>

    <script>

        // ES6语法:let(变量)/const(常量)

        const app = new Vue({

            el: '#app', //挂载管理元素

            data: { //定义数据

                msg: '长安镖局!'

            }

        })

    </script>

</body>

(二.1) 模版语法:插值操作

1.mustache语法: {{ }}, 可以写变量,也可以写表达式 {{ a+b }}

2.v-once: 只渲染元素和组件一次,不需要表达式.

<span v-once>姓名: {{msg}}</span>

3.v-html: 填充HTML片段,内容按普通 HTML 插入渲染,不安全,本网站内部的数据可以使用,不用垮域的数据.

<div v-html="HTML片段"></div>

4.v-text: 直接用 v-text 就不会有闪动问题,填充纯文体.

<span v-text="msg"></span>

<!-- 和下面的一样 -->

<span>{{msg}}</span>

5.v-pre:显示原始的信息,跳过编译过程,填充原始信息,不需要表达式.

<span v-pre>{{ 显示原始的信息 }}</span>

6.v-cloak:属性选择器,解决插值表达式闪动的问题",在样式中提供指令,这个指令保持在元素上直到关联实例结束编译,一般不用

<style>
[v-cloak] {

  display: none;

}
</style>

<style>

<div v-cloak>{{ message }} </div>
</style>

(二.2) 模版语法:绑定属性

1.v-bind: 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式,给标签属性赋值。

属性绑字语法:

<a v-bind:href="url">百度</a>

<a :href="url">百度</a>

样式绑字对象语法:常用

<div v-bind:class={函数名}"></div>

样式绑定数组语法:不常用,写死的

<div v-bind:class="['数据样式1','数据样式2']"></div>
<div-bind:class="[变量1,变量2]"></div>

<!-- 绑定一个 attribute -->

<img v-bind:src="data:imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->

<button v-bind:[key]="value"></button>

<!-- 缩写 -->

<img :src="data:imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->

<button :[key]="value"></button>

<!-- 内联字符串拼接 -->

<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->

<div :class="{ red: isRed }"></div>

<div :class="[classA, classB]"></div>

<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->

<div :style="{ fontSize: size + 'px' }"></div>

<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->

<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->

<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->

<child-component v-bind="$props"></child-component>

<!-- XLink -->

<svg><a :xlink:special="foo"></a></svg>

(二.3) 模版语法:计算属性

1.computed: 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算.

var vm = new Vue({

  data: { a: 1 },

  computed: {

    // 仅读取

    aDouble: function () {

      return this.a * 2

    },

    // 读取和设置

    aPlus: {

      get: function () {

        return this.a + 1

      },

      set: function (v) {

        this.a = v - 1

      }

    }

  }

})

vm.aPlus   // => 2

vm.aPlus = 3

vm.a       // => 2

vm.aDouble // => 4

(二.4) 模版语法:事件监听

1.v-on: 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->

<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->

<button @[event]="doThis"></button>

<!-- 停止冒泡 -->

<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->

<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->

<form @submit.prevent></form>

<!--  串联修饰符 -->

<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->

<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->

<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->

<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->

<button v-on="{ mousedown: doThis, mouseup: doThat }"></butto

2.v-on修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

3. v-on事件函数的调用传参方法:

<!--直接绑定函数名handle参数,$event默认传递-->

<button @click='handle1'>点击1</button>

<!--调用函数名handle()传参,$event只能在最后,固定写法-->

<button @click='handle2(123,456,$event)'>点击4</button>

(二.5) 模版语法:条件判断

1.v-if/v-else-if/v-else:根据表达式的值的 truthiness 来有条件地渲染元素.

<div v-if="type === 'A'">

  A

</div>

<div v-else-if="type === 'B'">

  B

</div>

<div v-else-if="type === 'C'">

  C

</div>

<div v-else>

  Not A/B/C

</div>

2.v-show: 根据表达式之真假值，切换元素的 display CSS property.v-if元素的删除增加,v-show是元素一直都在.只是改变样式,操作频率高时用v-show,一次性切换用v-if,v-if一般用得多.

(二.6) 模版语法:循环遍历

1.v-for: 基于源数据多次渲染元素或模板块,另外也可以为数组索引指定别名 (或者用于对象的键).

为当前遍历的元素提供别名：

<div v-for="item in items">

  {{ item.text }}

</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, name, index) in object"></div>>

2.v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">

  {{ item.text }}

</div>

3.总结整理响应式数组方法

数组最前面添加元素: 数组名.push('a','b','...') 可以传多个值
数组最前后添加元素: 数组名.unshift('a','b','...') 可以传多个值
删除数组最前面元素: 数组名.shift()
删除数组最后面元素: 数组名.pop()
删除/插入/替换元素: 数组名.splice(参数1(从哪个元素开始),参数2(删除几个元素))
　　　　　　　　　 数组名.splice(参数1(从哪个元素开始),参数2(删除几个元素),参数3(将替换的元素明细放到删除元素的位置))
　　　　　　　　　 数组名.splice(参数1(从哪个元素开始),参数2(0),参数3(插入的元素明细) )
排序数组中元素: 数组名.sort()
反转数组中元素: 数组名.pop()
通过索引修改数据中的元素,不会响应式显示.
Vue中的set方法: Vue.set(this.数组名,数组索引值,修改后的值).

(二.7) 模版语法:过滤器

1. 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->

{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->

<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

filters: {

  capitalize: function (value) {

    if (!value) return ''

    value = value.toString()

    return value.charAt(0).toUpperCase() + value.slice(1)

  }

}

2.ES6中取小数位数方法: num.toFixed(2),数组计算的几个高阶函数:filter/map/reduce

(二.8) 模版语法:双向绑定

1.v-model: 随表单控件类型不同而不同,在表单控件或者组件上创建双向绑定

2.v-model修饰符

预期：随表单控件类型不同而不同。

限制：

<input>

<select>

<textarea>

components

修饰符：

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤

用法：

在表单控件或者组件上创建双向绑定。细节请看下面的教程链接

Vue学习笔记-Vue.js-2.X 学习(二)

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习的更多相关文章

Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
机器学习实战（Machine Learning in Action）学习笔记————06.k-均值聚类算法（kMeans）学习笔记
机器学习实战(Machine Learning in Action)学习笔记————06.k-均值聚类算法(kMeans)学习笔记关键字:k-均值.kMeans.聚类.非监督学习作者:米仓山下时间: ...
深度学习-tensorflow学习笔记(1)-MNIST手写字体识别预备知识
深度学习-tensorflow学习笔记(1)-MNIST手写字体识别预备知识在tf第一个例子的时候需要很多预备知识. tf基本知识香农熵交叉熵代价函数cross-entropy 卷积神经网络 s ...
Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
Vue2.x源码学习笔记-Vue构造函数
我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look se ...

随机推荐

Java 复习整理day04
在我们的日常生活中,方法可以理解为要做某件事情, 而采取的解决办法. 如:小明同学在路边准备坐车来学校学习.这就面临着一件事情(坐车到学校这件事情)需要解决,解决办法呢?可采用坐公交车或坐出租车的 ...
Java中finalize()方法的作用
finalize方法是Object提供的的实例方法,使用规则如下: 当对象不再被任何对象引用时,GC会调用该对象的finalize()方法 finalize()是Object的方法,子类可以覆盖这个方 ...
Pytest（12）pytest缓存
前言 pytest 运行完用例之后会生成一个 .pytest_cache 的缓存文件夹,用于记录用例的ids和上一次失败的用例. 方便我们在运行用例的时候加上--lf 和 --ff 参数,快速运行上一 ...
XV6学习（11）Lab thread: Multithreading
代码放在github上. 这一次实验感觉挺简单的,特别是后面两个小实验.主要就是对多线程和锁进行一个学习. Uthread: switching between threads 这一个实验是要实现一个 ...
django开发东京买菜,全栈项目,前端vue,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等
因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...
Maven三种打包方式jar war pom
1.pom工程用在父级工程或聚合工程中.用来做jar包的版本控制.必须指明这个聚合工程的打包方式为pom 2.war工程将会打包成war,发布在服务器上的工程.如网站或服务.在SpringBoot ...
xls与csv文件的区别
CSV是文本文件,用记事本就能打开.XLS 是二进制的文件只有用 EXCEL 才能打开:CSV 文件格式只能保存活动工作表中的单元格所显示的文本和数值.XLS 中所有的数据行和字符都将保存.数据列以逗 ...
C - C(换钱问题)
换钱问题: 给出n种钱,m个站点,现在有第 s种钱,身上有v 这么多: 下面 m行站点有a,b两种钱,rab a->b的汇率,cab a-->b的手续费, 相反rba cba : 问在 ...
Codeforces Round #626 Div2 D. Present（位掩码,二分）
题目链接:https://codeforces.com/contest/1323/problem/D 题意:给了大小为4e5的数组a,其中1<=ai<=1e7.求所有点对和的异或和,即: ...
hdu5247 找连续数
Problem Description 小度熊拿到了一个无序的数组,对于这个数组,小度熊想知道是否能找到一个k 的区间,里面的 k 个数字排完序后是连续的. 现在小度熊增加题目难度,他不想知道是否有这 ...

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

一 使用环境: windows 7 64位操作系统