vue知识点整理

最新推荐文章于 2024-05-15 19:00:53 发布

weixin_45844706

最新推荐文章于 2024-05-15 19:00:53 发布

阅读量1.5k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45844706/article/details/112168450

版权

一、介绍

1、作者：尤雨溪

2、官网：https://cn.vuejs.org/

3、渐进式 JavaScript 框架渐进式：主张最少

4、优点：易用、灵活、高效、渐进式、模块化友好，有利于SPA

5、缺点：不支持IE8及以下版本；首屏加载时间长，不利于SEO

6、核心：数据驱动，组件系统

7、多页面应用和单页面应用

应用	优缺点
MPA:multiple page application 多页面应用	一个URL对应一个HTML文件，多个URL对应多个HTML文件；会出现白屏，用户体验不好，有利于SEO优化。
SPA:single page application 单页面应用	多个URL对应一个HTML文件，用户体验比较好，首屏加载时间长,不利于SEO

二、vue的安装

1、cdn方式不推荐使用

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

2、 npm 方式学习过程中使用

npm i vue

3 、脚手架 vue-cil

三、使用

1、引入

<head>
    <!-- 1.引入 -->
    <script src="./node_modules/_vue@2.6.12@vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.定义一个节点，受vue控制 -->
    <div id="app">
        {
  {1+1}}
    </div>
    <script>
        // 3.实例化vue 
        new Vue({
    
            el:"#app"
        })
    </script>
</body>

2、el 挂载点

特点：
1.el 后面可以写css的所有选择器；
2.一个vue实例只能作用在一个节点上。如果满足el的节点，有好几个，那么也只能作用在满足条件的第一个节点上；
3、一般情况下使用id；
4.不要将el绑定在html或者body上 `Do not mount vue to or ；

3、data 和 methods

  data :属性 -变量
  methods:方法-函数

let vv = new Vue({
   
     el: "#app",//挂载点
     data: {
   //属性-变量
         a: 10,
         name: "小红"
     },
     methods: {
   //方法-函数
         changeName: function () {
   
             this.name = "张三"
         },
         changeA: function () {
   
             this.a = 20;
         }
     }

 })
 console.log(vv.name);
vv.changeName()

4、v-text 和v-html

{ {}} 模板语法
{ {}}外面的按照html解析，{ {}}里面需要遵循js的语法，vue解析
优点：简单直接
缺点：不能解析标签，会出现闪屏
v-html
优点：能解析标签解决闪屏问题
缺点：不太方便
v-text
优点：解决闪屏问题
缺点：不能解析标签不太方便

注意：首屏的非标单元素，最好不要使用{ {}}，使用v-text代替，其他页面可以使用{ {}}。

5、属性绑定 v-bind

用于给html标签设置属性

v-bind 绑定属性,简写 :
v-bind 不仅可以作用在已有的属性上，也可以作用在自定义的属性上

6、条件渲染

v-if
v-else 需要和v-if 挨着
v-show
v-if和v-show相同点和不同点
相同点：
值是true,出现；false,消失
不同点：
v-if :false 情况下，采用的是惰性加载；
v-show:false 情况下，采用的是display：none;
使用场景：频繁切换，应该使用v-show; 不频繁切换，建议使用v-if;

7、v-for列表渲染

<a v-for="(item,index) in website" :href="item.url" :title="item.name">
     <img :src="item.logo" alt="">
</a>

new Vue({
   
    el: "#app",
    data: {
   
        comments: arr,
        website:[
            {
   name:"淘宝",url:"http://taobao.com",logo:"http://img.alicdn.com/tfs/TB11VVdptTfau8jSZFwXXX1mVXa-190-140.gif"},
            {
   name:"京东",url:"http://jd.com",logo:"http://img1.360buyimg.com/da/jfs/t1/32282/27/6770/112552/5c90a8b3Ea193c1af/897d05893a77d649.gif?v=0.9255643030565797"},
            {
   name:"百度",url:"http://baidu.com",logo:"http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"},
        ]
    },

})

双 for

 <div class="movie" v-for="item in movies">
    <h3>电影名：{
  {item.name}}</h3>
    <img :src="item.img" alt="">
    <p>导演：
        <span v-for="i in item.director">{
  {i.name }}&nbsp;&nbsp;</span>
    </p>
    <p>主演：
        <span v-for="i in item.actors">{
  {i.name}}&nbsp;&nbsp;</span>
    </p>
</div>

  new Vue({
   
     el: "#app",//挂载点
     data: {
   //属性
       movies: [
           {
     id: 1,
              name: "我和我的祖国",
              img:"https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=483649607,731107566&fm=26&gp=0.jpg",
              director: [  {
    id: 1, name: "徐峥" },
                           {
    id: 2, name: "黄渤" }
                        ],
               actors: [   {
    id: 1, name: "徐峥" },
                           {
    id: 2, name: "黄渤" },
                           {
    id: 3, name: "刘昊然" },
                        ]
                    },
        {
     id: 2,
           name: "大话西游",
           img: "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2651853086,778270490&fm=26&gp=0.jpg",
          director: [{
    id: 4, name: "刘镇伟" }
                    ],
         actors: [  {
    id: 5, name: "周星驰" },
                     {
    id: 6, name: "朱茵" },
                  ]
                    },
    {
         id: 3,
           name: "我和我的家乡",
           img: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=947938482,3261718106&fm=111&gp=0.jpg",
          director: [
                            {
    id: 1, name: "徐峥" },
                            {
    id: 7, name: "宁浩" }
                        ],
          actors: [
                            {
    id: 8, name: "徐峥" },
                            {
    id: 9, name: "黄渤" },
                            {
    id: 10, name: "邓超" },
                        ]
                    },
                ]
            },

key:

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。一般使用string|number

<ul>
    <!-- vue采用的是“就地更新”原则，
    所以，我们需要给vue提供一个唯一标识，
    让vue可以计算出哪些节点发生了改变，需要重新渲染。
    一般情况下，key绑定的都是id
    -->
    <li v-for="(item,index) in movies" :key="item.id">
        <h3>{
  {item.name}}</h3>
        <button @click="changeName(index)">妲己</button>
        <button>删除</button>
    </li>
</ul>

8、v-on事件绑定

    简写@

 <button v-on:click="fn()">111</button>

methods:{
   
     fn(){
   
         alert(1)
     }
 }

四、动态样式

1、动态行间样式

v-bind:style="json"

最低0.47元/天解锁文章

weixin_45844706

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue知识点整理

一、介绍1、作者：尤雨溪2、官网：https://cn.vuejs.org/3、渐进式 JavaScript 框架渐进式：主张最少4、优点：易用、灵活、高效、渐进式、模块化友好，有利于SPA5、缺点：不支持IE8及以下版本；首屏加载时间长，不利于SEO6、核心：数据驱动，组件系统7、多页面应用和单页面应用应用优缺点MPA:multiple page application 多页面应用一个URL对应一个HTML文件，多个URL对应多个HTML文件；会出现白屏，
复制链接

扫一扫