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= xxx挂载，那在子组件中也无法通过this.$ 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

<template>
    <div class="sub">This is an subpage</div>
</template>

<script>
    export default {
        name: 'Sub',
        props: {
            go:Object,//定义prop接收
            xxx:Object //定义prop接收
        },
        mounted(){
            let $ = this.$props.go.GraphObject.make //可直接调用
            this.$props.xxx.post() //可直接调用
        },
        methods:{}
    }
</script>

<style>
</style>

四、第一个案例

//实例化vue 
new Vue({
    // Vue 构造器中有一个el 参数，它是 DOM 元素中的 id,
    //这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
    el: "#app",
    //data 用于定义所有的基础数据，数据对象
    //当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
    //当这些属性的值发生改变时，html 视图将也会产生相应的变化。
    data: {
        msg: "<i>大家好</i>",
        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 = "";
        }
    }
})

五、插值

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值（插值表达式）插值表达式，用于输出对象属性和函数返回值
例：<h1>{{msg}}</h1>

六、指令

定义
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
v-text：给模板进行赋值,相当于innerText
例：<h1 v-text="msg"></h1>
v-html：使用 v-html 指令用于输出 html 代码，相当于innerHtml
例：<h1 v-html="msg"></h1>

插值表达式，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:属性="变量"
<a href="#" v-bind:title="num">哈哈</a>
简写：
:属性="变量"
<a href="#" :title="num">哈哈</a>
v-on：事件监听
vue的事件应该写在vue实例的Methods对象当中。
通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
v-on 可以接收一个定义的方法来调用。
例：
v-on:事件名="方法名"
<button v-on:click="noFlag">按钮</button>
简写：
@事件名="方法名"
<button @click="noFlag">按钮</button>
v-model：双向数据绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，只可以用在表单元素上
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
input type="text/password/number/radio/checkbox/hidden……"
select
textarea
例：
<input type="text" v-model="inputValue">
<input type="button" v-on:click="asyncStr()">
<h1>{{str}}</h1>
v-for：迭代（循环）
可以迭代数组对象数组对象
vue的列表渲染，即for循环
例：
当循环数组时，
<li v-for="(item,index) in arr"></li>
item表示数组里的数据，index表示下标，arr表示要循环的数组
当循环对象时，
<li v-for="(value, key, index) in object"></li>
value表示值，key表示键，index表示下标，object表示要循环的对象
注意的是在vue2.0之后要给迭代的元素绑定key属性 key的属性可以是唯一的数字或者字符串必须和v-bind一块用
<ul>
<li v-for="(item,index) in arr" v-bind:key="index"></li>
</ul>
v-show v-if：条件渲染
v-show和v-if都是通过布尔值来控制元素
v-show 是通过css操控显示或隐藏，即改变display的属性值
v-if 不符合条件的数据,不渲染
例：
<h1 v-show="flag">{{num1}}</h1>
<h1 v-if="flag">{{num1}}</h1>

七、修饰符：

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
用法:@事件名.修饰符="方法名"

.stop 阻止冒泡
.prevent 阻止事件的默认行为
.capture添加事件侦听器时使用事件捕获模式先执行外面的再执行里面的
<div class="box" @click.capture="test">
<input type="button" :title="title+1" value="点击" @click.stop="tip">
</div>
.self 只当事件在该元素本身比如不是子元素）触发时触发回调
.self与.stop的区别：.self只是能确保本身被触发,stop能阻止所有元素的冒泡
.once 事件只触发一次
<a href="http://www.baidu.com" @click.prevent.once="chang()">点击</a>
阻止默认事件只能触发一次

八、简易购物车：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <!-- v-model双向绑定数据 -->
        <p>商品名称：<input type="text" v-model="name"></p>
        <p>商品价格：<input type="number" v-model="price"></p>
        <!-- v-on:事件名="方法名" -->
        <p><input type="button" value="添加" @click="add"></p>
        <p><input type="button" value="全部删除" @click="removeAll"></p>
        <p><input type="button" value="正删除" @click="removeStart"></p>
        <p><input type="button" value="倒删除" @click="removeEnd"></p>
        <p>请输入搜索的关键字：<input type="text" v-model="search"></p>
        <table>
            <thead>
                <tr>
                    <th>商品序号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 将数据循环遍历到页面上 -->
                <tr v-for="(item,index) in list" v-show="item.name.includes(search)">
                    <td>{{index+1}}</td><!-- 序号 -->
                    <td>{{item.name}}</td><!-- 商品名 -->
                    <td>{{item.price}}</td><!-- 商品价格 -->
                    <!-- 商品数量改变，给按钮添加事件 -->
                    <td><button @click="item.count -=1 ">-</button><span>{{item.count}}</span><button
                            v-on:click="item.count += 1">+</button></td>
                    <td>{{item.price*item.count}}</td><!-- 小计 -->
                    <td><button v-on:click="remove(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <!-- 合计，调用合计的方法，方法有返回值 -->
        <h1>合计:{{all()}}</h1>
    </div>
</body>
<script>
    //实例化vue对象
    new Vue({
        // Vue 构造器中有一个el 参数，它是 DOM 元素中的 id,
        //这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
        el: '#app',
        //data 用于定义所有的基础数据，数据对象
        //当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。
        //当这些属性的值发生改变时，html 视图将也会产生相应的变化。
        data: {
            price: 0, //v-model双向绑定数据,绑定商品单价的那个表单
            name: '', //v-model双向绑定数据,绑定商品名称的那个表单
            list: [], //数组
            search: '', //v-model双向绑定数据,绑定搜索的那个表单
        },
        //methods 用于定义的函数，可以通过 return 来返回函数值。
        methods: {
            //添加
            add() {
                //向数组中添加数据,如果要调用vue对象data里的数据,必须使用this调用
                this.list.push({
                    name: this.name, //添加name为上面data数据里的name
                    price: this.price, //添加price为上面data数据里的price
                    count: 1, //定义初始数量
                })
                this.name = '' //将商品名称表单内容清空
                this.price = 0 //将商品单价表单数量清0
            },
            //删除,删除时,需要传入下标,锁定要删除的数据
            remove(index) {
                this.list.splice(index, 1) //删除本条数据
            },
            //全部删除
            removeAll() {
                this.list.splice(0, this.list.length) //获取到list的长度,全部删除
            },
            //正着删
            removeStart() {
                this.list.shift() //shift(),将数组的第一个元素删除
            },
            //倒着删
            removeEnd() {
                this.list.pop() //pop(),将数组的最后一个元素删除
            },
            //合计
            all() {
                var he = 0 //定义变量用来存储合计数据
                //遍历list数组
                for (var i in this.list) {
                    //将每一条数据里的单价*数量,加入变量he里
                    he += this.list[i].price * this.list[i].count
                }
                return he //返回合计数据
            },
        },
    })
</script>
</html>

九、过滤器(filter)：

定义：
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
过滤器分为两种，全局过滤器和局部过滤器。
过滤器的调用有一个就近原则先调用局部在调用全局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="msg">
    <!-- 调用过滤器： -->
    <!-- {{变量|管道符}}   -->
    <h1>{{msg | big}}</h1>
  </div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  // 1.定义全局过滤器：
  // 在创建 Vue 实例之前全局定义过滤器。
  // Vue.filter(“过滤器名”,function(需要过滤的字符串，参数列表){
  // 处理需要过滤的字符串然后 然后返回
  // }
  //全局的过滤器,定义在实例化vue对象之前
  Vue.filter("big", function (str) {
    var arr = str.split("").reverse();
    str = arr.join("");
    return str;
  })
  var vm = new Vue({
    el: "#app",
    data: {
      msg: ""
    },
    // 2.定义局部过滤器：
    // 在一个组件的选项中定义本地的过滤器。
    // Filters:{过滤器名(function(需要过滤的字符串){
    // 处理需要过滤的字符串然后 然后返回
    // })
    // }
    //局部的过滤器,定义在实例化vue对象里面
    filters: {
      big(str) {
        var start = str.slice(0, 1).toLocaleUpperCase();
        var end = str.slice(1);
        return start + end;
      }
    }
  })
</script>
</html>

十、自定义指令(directive)

定义：
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。比如聚焦输入框
指令名在定义的时候不带 v- 调用的带v-
自定义指令分为两种，全局指令和局部指令。
钩子函数：
一个指令定义对象可以提供如下几个钩子函数 (均为可选)；
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

vue-cli3关闭eslint校验

image.png

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

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