一、定义
- Vue (读音 /vjuː/,类似于 view) 是一套用于
构建用户界面的渐进式框架
。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 - Vue.js 模板语法
- Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
- Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
- 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
后台的框架模型:
M
(model)模型(操作数据库的方法)
V
(view)视图(页面)
C
(controller)控制器(协调数据库和模型)
前台的框架模型(是后台框架模型V的信息分类):
M
(model)模型(这个页面的数据)
V
(view)这个页面的视图html
VM
(逻辑,干什么事的思路)
二、安装
我使用的是vue-cli3,使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确:
vue --version
注意:mac安装报错Error: EACCES: permission denied, access '/usr/local/lib/node_modules,原因就是没有权限的问题
原因: 执行命令行命令时没有获得管理员权限
解决方案:在命令行前面添加sudo获取管理员权限,输入管理员密码就行
例如原来的是: npm install -g vue-cli
应该改为:sudo npm install -g vue-cli(vue-cli2)
sudo npm install -g @vue/cli
(vue-cli3)
再输入密码就行`
新建项目1:
三、vue挂载
之前vue-cli2创建项目后,如果自定义js插件,可以通过
import xxx from 'xxx'
Vue.prototype.$xxx = xxx
将xxx挂载到Vue原型上,但到了cli3中,根据网上资料,现在
import Vue from 'vue' 并不能返回Vue对象,如果还是使用
Vue.prototype.xxx进行调用
cli3中现在是通过createApp创建Vue实例对象,我们需要将js组件引入,通过props的形式传递(axios以前是需要挂载,现在通过VueAxios可以直接use使用)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
import gojs from 'gojs'
import xxx from './utils/xxx.js'
createApp(App, { go: gojs,xxx:xxx }).use(store).use(router).use(VueAxios,axios).mount('#app')
在子组件中引用go和xxx
This is an subpage
四、第一个案例
//实例化vue
new Vue({
// Vue 构造器中有一个el 参数,它是 DOM 元素中的 id,
//这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
el: "#app",
//data 用于定义所有的基础数据,数据对象
//当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
//当这些属性的值发生改变时,html 视图将也会产生相应的变化。
data: {
msg: "大家好",
num: 1,
num1: 10,
flag: true,
arr: [1, "hello", 3, "是", 5, 6],
list: ['one', 'two', 'three'],
inputValue: "",
str: ""
},
//methods 用于定义的函数,可以通过 return 来返回函数值。
methods: {
// 和下面的方法一样,写法不同而已
// noFlag:function(){},
noFlag() {
this.flag = !this.flag;
},
asyncStr() {
this.str = this.inputValue;
this.inputValue = "";
}
}
})
五、插值
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值(插值表达式)插值表达式,用于输出对象属性和函数返回值
例:{{msg}}
六、指令
- 定义
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上
- v-text:给模板进行赋值,相当于innerText
例: - v-html:使用 v-html 指令用于输出 html 代码,相当于innerHtml
例:
插值表达式,v-text,v-html的区别:
1、插值表达式存在闪烁的问题;
2、v-text和v-html是全部替换,{{}}是可以进行部分替换;
3、v-html可以解析HTML标签,v-text和{{}}不可以;
v-bind:绑定属性
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
例:v-bind:属性="变量"
哈哈
简写:
:属性="变量"
哈哈
v-on:事件监听
vue的事件应该写在vue实例的Methods对象当中。
通常情况下,我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
例:
v-on:事件名="方法名"
简写:
@事件名="方法名"
v-model:双向数据绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定,只可以用在表单元素上
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
input type="text/password/number/radio/checkbox/hidden……"
select
textarea
例:
{{str}}
v-for:迭代(循环)
可以迭代数组 对象 数组对象
vue的列表渲染,即for循环
例:
当循环数组时,
v-show v-if:条件渲染
v-show和v-if都是通过布尔值来控制元素
v-show 是通过css操控显示或隐藏,即改变display的属性值
v-if 不符合条件的数据,不渲染
例:
{{num1}}
{{num1}}
item表示数组里的数据,index表示下标,arr表示要循环的数组
当循环对象时,
value表示值,key表示键,index表示下标,object表示要循环的对象
注意的是 在vue2.0之后要给迭代的元素绑定key属性 key的属性可以是唯一的数字或者字符串必须和v-bind一块用
七、修饰符:
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
用法:@事件名.修饰符="方法名"
- .stop 阻止冒泡
- .prevent 阻止事件的默认行为
- .capture添加事件侦听器时使用事件捕获模式先执行外面的 再执行里面的
- .self 只当事件在该元素本身比如不是子元素)触发时触发回调
.self与.stop的区别:.self只是能确保本身被触发,stop能阻止所有元素的冒泡
- .once 事件只触发一次
点击
阻止默认事件只能触发一次
八、简易购物车:
商品名称:
商品价格:
请输入搜索的关键字:
商品序号
商品名称
商品价格
商品数量
商品小计
操作
{{index+1}}
{{item.name}}
{{item.price}}
{{item.count}}
{{item.price*item.count}}
合计:{{all()}}
九、过滤器(filter):
定义:
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化
。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
过滤器分为两种,全局过滤器和局部过滤器
。
过滤器的调用有一个就近原则 先调用局部 在调用全局
{{msg | big}}
十、自定义指令(directive)
定义:
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。比如聚焦输入框
指令名 在定义的时候不带 v- 调用的带v-
自定义指令分为两种,全局指令和局部指令。
钩子函数:
一个指令定义对象可以提供如下几个钩子函数 (均为可选);
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
vue-cli3关闭eslint校验
移动端H5部分区域缩放并移动
https://blog.csdn.net/qq_39197547/article/details/93379257