vue 0基础学习

一、定义

  • 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)
再输入密码就行`

image.png

新建项目1:
image.png

三、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






四、第一个案例

//实例化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循环
    例:
    当循环数组时,


  • item表示数组里的数据,index表示下标,arr表示要循环的数组
    当循环对象时,

  • value表示值,key表示键,index表示下标,object表示要循环的对象
    注意的是 在vue2.0之后要给迭代的元素绑定key属性 key的属性可以是唯一的数字或者字符串必须和v-bind一块用


  • v-show v-if:条件渲染
    v-show和v-if都是通过布尔值来控制元素
    v-show 是通过css操控显示或隐藏,即改变display的属性值
    v-if 不符合条件的数据,不渲染
    例:

    {{num1}}


    {{num1}}

七、修饰符:

修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.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校验

image.png
image.png

移动端H5部分区域缩放并移动

https://blog.csdn.net/qq_39197547/article/details/93379257

你可能感兴趣的:(vue 0基础学习)