两天前端学习 - vue

Lewis
2022-04-18 / 0 评论 / 93 阅读 / 正在检测是否收录...

一、双向绑定

<body>
    <div id="app"> <input type="text" v-model="num">
        <h2>{{name}},非常帅!!!有{{num}}个人为他点赞。 </h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建 vue 实例 
        let app = new Vue({
            el: "#app", // el 即 element,该 vue 实例要渲染的页面元素 
            data: { // 渲染页面需要的数据 
                name: "张三",
                num: 5,
            }
        });
    </script>
</body>

双向绑定:
效果:我们修改表单项,num 会发生变化。我们修改 num,表单项也会发生变化。为了实 时观察到这个变化,我们将 num 输出到页面。 我们不需要关注他们为什么会建立起来关联,以及页面如何变化,我们只需要做好数据和视图的关联即可(MVVM)

二、事件处理

<body>
    <div id="app"> <input type="text" v-model="num">
        <button v-on:click="num++">关注</button>
        <h2>{{name}},非常帅!!!有{{num}}个人为他点赞。 </h2>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 创建 vue 实例 
        let app = new Vue({
            el: "#app", // el 即 element,该 vue 实例要渲染的页面元素 
            data: { // 渲染页面需要的数据 
                name: "张三",
                num: 5
            },
        });
    </script>
</body>
  • 这里用v-on指令绑定点击事件,而不是普通的onclick,然后直接操作 num
  • 普通 click 是无法直接操作 num 的。
  • 未来我们会见到更多 v-xxx,这些都是 vue 定义的不同功能的指令。
    简单使用总结:
    1)、使用 Vue 实例管理 DOM
    2)、DOM 与数据/事件等进行相关绑定
    3)、我们只需要关注数据,事件等处理,无需关心视图如何进行修改

三、v-text 和 v-html

  使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的{{}}, 加载完毕后才显示正确数据,我们称为插值闪烁。可以使用 v-text 和 v-html 指令来替代{{}} 说明:

  • v-text:将数据输出到元素内部,如果输出的数据有 HTML 代码,会作为普通文本输出
  • v-html:将数据输出到元素内部,如果输出的数据有 HTML
    l24fmcuz.png

四、v-bind

  html 属性不能使用双大括号形式绑定,我们使用 v-bind 指令给 HTML 标签属性绑定值; 而且在将 v-bind 用于 classstyle 时,Vue.js 做了专门的增强。
4.1 绑定 class

<div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }"> </div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            hasError: false
        }
    })
</script>

4.2 绑定 style
  v-bind:style 的对象语法十分直观,看着非常像 CSS,但其实是一个 JavaScript 对象。style 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,这种方式记得用单引号括起 来) 来命名。 例如:font-size-->fontSize

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz e + 'px' }"></div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })
</script>

结果:


4.3 绑定其他任意属性

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontS ize + 'px' }" v-bind:user="userName"> </div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            activeColor: 'red',
            fontSize: 30,
            userName: 'zhangsan'
        }
    })
</script>

效果:


4.4 v-bind 缩写

五、v-for 遍历数据

遍历数据渲染页面是非常常用的需求,Vue 中通过 v-for 指令来实现。
5.1 普通遍历
语法:v-for="item in items"

  • items:要遍历的数组,需要在 vue 的 data 中定义好。
  • item:迭代得到的当前正在遍历的元素
    示例:

    <div id="app">
      <ul>
          <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li>
      </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
      let app = new Vue({
          el: "#app",
          data: {
              users: [{
                  name: '柳岩',
                  gender: '女',
                  age: 21
              }, {
                  name: '张三',
                  gender: '男',
                  age: 18
              }, {
                  name: '范冰冰',
                  gender: '女',
                  age: 24
              }, {
                  name: '刘亦菲',
                  gender: '女',
                  age: 18
              }, {
                  name: '古力娜扎',
                  gender: '女',
                  age: 25
              }]
          },
      })
    </script>

    5.2 带数字角标:
    在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数: 语法:v-for="(item,index) in items"

  • items:要迭代的数组
  • item:迭代得到的数组元素别名
  • index:迭代到的当前元素索引,从 0 开始。
    5.3 遍历对象
    v-for 除了可以迭代数组,也可以迭代对象。语法基本类似 语法:

    v-for="value in object"
    v-for="(value,key) in object"
    v-for="(value,key,index) in object"
  • 1 个参数时,得到的是对象的属性值
  • 2 个参数时,第一个是属性值,第二个是属性名
  • 3 个参数时,第三个是索引,从 0 开始

    <div id="app">
      <ul>
          <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li>
      </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
      let vm = new Vue({
          el: "#app",
          data: {
              user: {
                  name: '张三',
                  gender: '男',
                  age: 18
              }
          }
      })
    </script>

    l24g3gd2.png
    5.4 KEY
      用来标识每一个元素的唯一特征,这样 Vue 可以使用“就地复用”策略有效的提高渲染的效率。

    <ul>
      <li v-for="(item,index) in items" :key=”index”></li>
    </ul>
    <ul>
      <li v-for="item in items" :key=”item.id”></li>
    </ul>

    如果 items 是数组,可以使用 index 作为每个元素的唯一标识。
    如果 items 是对象数组,可以使用 item.id 作为每个元素的唯一标识。

六、计算属性和侦听器

6.1 计算属性(computed)
某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 示例:

<div id="app">
    <ul>
        <li>西游记:价格{{xyjPrice}},数量: <input type="number" v-model="xyjNum"></li>
        <li>水浒传:价格{{shzPrice}},数量: <input type="number" v-model="shzNum"></li>
        <li>总价:{{totalPrice}}</li>
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            xyjPrice: 56.73,
            shzPrice: 47.98,
            xyjNum: 1,
            shzNum: 1
        },
        computed: {
            totalPrice() {
                return this.xyjPrice * this.xyjNum + this.shzPrice * th is.shzNum;
            }
        },
    })
</script>

l24g89zr.png

6.2 侦听(watch)
watch 可以让我们监控一个值的变化。从而做出相应的反应。 示例:

<div id="app">
    <ul>
        <li>西游记:价格{{xyjPrice}},数量: <input type="number" v-model="xyjNum"></li>
        <li>水浒传:价格{{shzPrice}},数量: <input type="number" v-model="shzNum"></li>
        <li>总价:{{totalPrice}}</li> {{msg}}
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            xyjPrice: 56.73,
            shzPrice: 47.98,
            xyjNum: 1,
            shzNum: 1,
            msg: ""
        },
        computed: {
            totalPrice() {
                return this.xyjPrice * this.xyjNum + this.shzPrice * th is.shzNum;
            }
        },
        watch: {
            xyjNum(newVal, oldVal) {
                if (newVal >= 3) {
                    this.msg = "西游记没有更多库存了";
                    this.xyjNum = 3;
                } else {
                    this.msg = "";
                }
            }
        }
    })
</script>

l24gj5nl.png

6.3 过滤器(filters)
  过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的 情况下,过滤器都是有用的,比如尽可能保持 API 响应的干净,并在前端处理数据的格式。
示例:展示用户列表性别显示男女

<body>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td> <!-- 使用代码块实现,有代码侵入 -->
                <td>{{user.gender===1? "男":"女"}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            userList: [{
                id: 1,
                name: 'jacky',
                gender: 1
            }, {
                id: 2,
                name: 'peter',
                gender: 0
            }]
        }
    });
</script>

6.3.1 局部过滤器
注册在当前 vue 实例中,只有当前实例能用

let app = new Vue({ 
    el: "#app", 
    data: { 
        userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender:0 } ] 
    }, 
    filters: { 
        genderFilter(gender) { return gender === 1 ? '男~' : '女~' } 
    } 
});

{{user.gender | genderFilter}}

6.3.2 全局过滤器

// 在创建 Vue 实例之前全局定义过滤器: 
Vue.filter('capitalize', function (value) { 
  return value.charAt(0).toUpperCase() + value.slice(1) 
})

任何 vue 实例都可以使用: {{user.name | capitalize}}
过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式

7.组件化

  在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航,但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。在 vue 里,所有的 vue 实例都是组件。
l24guo5u.png
7.1 全局组件
我们通过 Vue 的 component 方法来定义一个全局组件。

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 定义全局组件,两个参数:1,组件名称。2,组件参数 
    Vue.component("counter", {
        template: '<button v-on:click="count++">你点了 我 {{ count }} 次,我记住了.</button>',
        data() {
            return {
                count: 0
            }
        }
    })
    let app = new Vue({
        el: "#app"
    })
</script>
  • 组件其实也是一个 Vue 实例,因此它在定义时也会接收:data、methods、生命周期函 数等
  • 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有 el 属性。
  • 但是组件渲染需要 html 模板,所以增加了 template 属性,值就是 HTML 模板
  • 全局组件定义完毕,任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
  • data 必须是一个函数,不再是一个对象。

7.2 组件复用
定义好的组件,可以任意复用多次:

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

组件的 data 属性必须是函数!
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。详细了解: 点击这里

7.3 局部组件
  一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着 Vue 的加载而加载。 因此,对于一些并不频繁使用的组件,我们会采用局部注册。
 我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:

const counter = { 
  template: '<button v-on:click="count++">你点了 我 {{ count }} 次,我记住了.</button>', 
  data() { 
    return { 
      count:0 
    } 
  } 
};

然后在 Vue 中使用它:

let app = new Vue({ 
  el: "#app", 
  components: { 
    counter: counter // 将定义的对象注册为组件 
  } 
})

components 就是当前 vue 对象子组件集合。

  • 其 key 就是子组件名称
  • 其值就是组件对象名
    效果与刚才的全局注册是类似的,不同的是,这个 counter 组件只能在当前的 Vue 实例 中使用
    简写:

    let app = new Vue({ 
    el: "#app", 
    components: { 
      counter // 将定义的对象注册为组件 
    } 
    })

    八、生命周期钩子函数

    8.1 生命周期
    每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模 板等等。Vue 为生命周期中的每个状态都设置了钩子函数(监听函数)。每当 Vue 实例处于 不同的生命周期时,对应的函数就会被触发调用。 生命周期:你不需要立马弄明白所有的东西。
    l24hbd44.png

8.2 钩子函数

  • beforeCreated:我们在用 Vue 时都要进行实例化,因此,该函数就是在 Vue 实例化时调 用,也可以将他理解为初始化函数比较方便一点,在 Vue1.0 时,这个函数的名字就是 init。
  • created:在创建实例之后进行调用。
  • beforeMount:页面加载完成,没有渲染。如:此时页面还是{{name}}
  • mounted:我们可以将他理解为原生 js 中的 window.onload=function({.,.}),或许大家也在
    用 jquery,所以也可以理解为 jquery 中的$(document).ready(function(){….}),他的功能就 是:在 dom 文档渲染完毕之后将要执行的函数,该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成张三
  • beforeDestroy:该函数将在销毁实例前进行调用 。
  • destroyed:改函数将在销毁实例时进行调用。
  • beforeUpdate:组件更新之前。  updated:组件更新之后。
    示例:

    <body>
      <div id="app"> <span id="num">{{num}}</span> <button v-on:click="num++">赞!</button>
          <h2>{{name}},非常帅!!!有{{num}}个人点赞。 </h2>
      </div>
    </body>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      let app = new Vue({
          el: "#app",
          data: {
              name: "张三",
              num: 100
          },
          methods: {
              show() {
                  return this.name;
              },
              add() {
                  this.num++;
              }
          },
          beforeCreate() {
              console.log("=========beforeCreate=============");
              console.log("数据模型未加载:" + this.name, this.num);
              console.log("方法未加载:" + this.show());
              console.log("html 模板未加载: " + document.getElementById("num"));
          },
          created: function() {
              console.log("=========created=============");
              console.log("数据模型已加载:" + this.name, this.num);
              console.log("方法已加载:" + this.show());
              console.log("html 模板已加载: " + document.getElementById("num"));
              console.log("html 模板未渲染: " + document.getElementById("num").innerText);
          },
          beforeMount() {
              console.log("=========beforeMount=============");
              console.log("html 模板未渲染: " + document.getElementById("num").innerText);
          },
          mounted() {
              console.log("=========mounted=============");
              console.log("html 模板已渲染: " + document.getElementById("num").innerText);
          },
          beforeUpdate() {
              console.log("=========beforeUpdate=============");
              console.log("数据模型已更新:" + this.num);
              console.log("html 模板未更新: " + document.getElementById("num").innerText);
          },
          updated() {
              console.log("=========updated=============");
              console.log("数据模型已更新:" + this.num);
              console.log("html 模板已更新: " + document.getElementById("num").innerText);
          }
      });
    </script>

九、vue 模块化开发

  • npm install webpack -g :全局安装 webpack
  • npm install -g @vue/cli-init :全局安装 vue 脚手架
  • vue init webpack appname :vue 脚手架使用 webpack 模板初始化一个 appname 项目
  • npm start = npm run dev :启动项目
  • npm run build :将项目打包

    模块化开发:
    l24hj7cu.png

运行流程

  • 进入页面首先加载 index.html 和 main.js 文件。
  • main.js 导入了一些模块【vue、app、router】,并且创建 vue 实例,关联 index.html 页面的
    元素。使用了 router,导入了 App 组件。并且使用<App/>标签 引用了这个组件
  • 第一次默认显示 App 组件。App 组件有个图片和,所以显示了图片。 但是由于代表路由的视图,默认是访问/#/路径(router 路径默认使用 HASH 模式)。在 router 中配置的/是显示 HelloWorld 组件。
  • 所以第一次访问,显示图片和 HelloWorld 组件。
  • 我们尝试自己写一个组件,并且加入路由。点击跳转。需要使用Go to Foo标签。

Vue 单文件组件
Vue 单文件组件模板有三个部分;

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>
<style scoped>
    h1,
    h2 {
        font-weight: normal;
    }
</style>

VSCODE 添加用户代码片段迅速生成vue文件
文件-->首选项-->用户代码片段-->点击新建代码片段--取名 vue.json 确定

{ "生成 vue 模板": { 
  "prefix": "vue", 
  "body": [ 
    "<template>", 
    "<div></div>", 
    "</template>",
    "", 
    "<script>", 
    "//这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json 文件,图片文件等等)", 
    "//例如:import 《组件名称》 from '《组件路径》';", 
    "", 
    "export default {", 
    "//import 引入的组件需要注入到对象中才能使用", 
    "components: {},", 
    "props: {},", 
    "data() {", 
    "//这里存放数据", 
    "return {",
    "", 
    "};",
    "},",
    "//计算属性 类似于 data 概念", 
    "computed: {},", 
    "//监控 data 中的数据变化", 
    "watch: {},", 
    "//方法集合", 
    "methods: {", 
    "", 
    "},", 
    "//生命周期 - 创建完成(可以访问当前 this 实例)", 
    "created() {", "", "},",
    "//生命周期 - 挂载完成(可以访问 DOM 元素)",
    "mounted() {", "", "},",
    "beforeCreate() {}, //生命周期 - 创建之前", 
    "beforeMount() {}, //生命周期 - 挂载之前", 
    "beforeUpdate() {}, //生命周期 - 更新之前", 
    "updated() {}, //生命周期 - 更新之后", 
    "beforeDestroy() {}, //生命周期 - 销毁之前", 
    "destroyed() {}, //生命周期 - 销毁完成", 
    "activated() {}, //如果页面有 keep-alive 缓存功能,这个函数会触发 ", 
    "}", 
    "</script>", 
    "<style lang='scss' scoped>", 
    "//@import url($3); 引入公共 css 类",
    "$4", 
    "</style>" ],
    "description": "生成 vue 模板" 
  } 
}

导入 element-ui 快速开发
1、安装 element-ui: npm i element-ui
2、在 main.js 中引入 element-ui 就可以全局使用了。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3、将 App.vue 改为 element-ui 中的后台布局
4、添加测试路由、组件,测试跳转逻辑
(1) 、参照文档 el-menu 添加 router 属性
(2) 、参照文档 el-menu-item 指定 index 需要跳转的地址

0

评论 (0)

取消