VUE基础知识01

最新推荐文章于 2023-01-20 21:25:14 发布

-Y、

最新推荐文章于 2023-01-20 21:25:14 发布

阅读量187

点赞数

分类专栏： VUE 文章标签： vue javascript js html

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105502315

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

===================================================================

Mustache语法：{{}} 不仅可以添加变量，也可以添加简单的表达式
！！只能在内容中使用不能在标签里面使用

事件里面要添加的是方法method

===================================================================

通过按钮选择布尔值来增删类：
看注释！！！

<style>
        .active{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="app">
     <h2 class="title" v-bind:class="cun_qie_huan()">{{message}} </h2>
     //{ }，一对括号里面放的是对象，有键值对{类名：布尔值，类名2：布尔值}
     //两个class会合并，固定class直接写，变化class用v-bind绑定 -->
     <button v-on:click="qie_huan()" >按钮</button>//调用函数要加括号
      <!-- 监听事件 -->
  </div>
      
     <script src="js/vue.js"></script>
     <script>
         const app=new Vue({
             el: '#app',
             data: {
                 message: '你好啊',
                 isactive : true,
                 isline : true
             },
             methods: {
                 qie_huan:function(){
                     this.isactive=!this.isactive
                    //方法里面拿变量要加this              
             },
                cun_qie_huan:function(){
                             return { active: this.isactive ,line: this.isline}
                             //方法里面拿变量要加this 
                 }
             }
         })
     </script>
  </body>

v-bind ：class="[变量1，变量2]" ---->数组绑定
也可以将 [变量1，变量2] 放在方法的函数中作为返回值，然后调用函数
方法使用到变量记得加this

指令：

:key 这个属性用于绑定每一个元素，当使用v-for的时候最好使用这个属性，但是要保证key里面的值是唯一的，不然没有意义

v-for：遍历变量的时候使用哪个标签就放在哪个标签里面，v-for=“随便变量 in 列表” {{随便变量}}
加上index----->（随便变量，index）in 列表 <--------还可以获得列表下标

遍历对象：
遍历数组同理

<body>
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in info">{{index}}、{{value}}:{{key}}</li>
            //遍历对象时要先获取value，到调用的时候才会是正常逻辑关系
        </ul>
    </div>
    
    <script>
        const vm=new Vue({
            el:'#app',
            data:{ 
                info:{
                    name:'小明',
                    age:18,
                    tele:15521548975
                }
            }
        })
    </script>
</body>

v-on：监听事件
@click ---- 语法糖写法，在事件前面加上@

v-on的修饰符：可以同时使用多个
1、 .stop — 修饰符阻止事件冒泡使用
@click.stop=‘increase（）’

2、.prevent — 阻止默认事件

3、.键帽编号或者简写 — 当事件从特定键触发时才触发回调

4、.native — 监听组件根元素的原生事件

5、.once — 只触发一次回调

<body>
    <div id="app">

        <h2>{{count}}</h2>
        <button @click='increase（）'>+</button>
        <button @click='decrease（）'>-</button>    
    </div>
    
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                count:0
            },
            methods:{
                increase(){
                    this.count++
                },
                decrease(){
                    this.count++
                }
            }
        })
    </script>
</body>

v-once（后面不接任何东西） :当改变过一次，有这个指令的元素不会改变第二次

v-html=”url(带有html标签的值)”：假如系统返回的值带有html标签则可以使用这个方法，可以解析html代码

v-text=“message”：用法类似{{}}但是不灵活，一般不用

v-pre：类似<pre> 把内容原封不动显示出来

v-cloak：斗篷加载完才会显示内容，而且这个属性会消失

v-bind:
配合 src 和 href 使用可以将src里面的值解析为变量
其他有特殊含义的属性也一样例如title，class

既可以配合class使用："{类名：布尔值，类名2：布尔值}"
也可以配合style使用："{css属性名：‘css属性值’，css属性名2：‘css属性值2’}"

使用vue框架的时候css属性值要加单引号，否则会认为是一个变量，
除非你的确想使用变量："{css属性名：finalFontSize+‘px’}"会进行隐式转换进行连接

css属性名命名：可以使用驼峰法，也可以使用类似font-size 加-的写法

语法糖的写法：就是一个冒号 (：相当于 v-bind : )

<body>
    <div id="app">
        <h2 :style="{fontSize:'50px',color:'green'}">{{title}}</h2>
        //觉得太长也可以放在methods：中形成函数再调用
        <ul>
            <li v-for="(item,index) in message">{{index}}-{{item}}</li>
        </ul>
    </div>

<script src="js/vue.js"></script>
<script>
    const app=new Vue({
        el: '#app',
        data: {
            title:'电影目录',
            message: ['海贼王','龙珠','进击的巨人','火影忍者','宠物小精灵']
        }
    })
    </script>
    
</body>

v-if、v-else、v-else-if 的用法，与if、 else基本一致，在html标签上使用

用户登陆切换：
在vue的处理过程中会加入虚拟DOM，它会对比信息，将代码里面不同的东西替换，其余的东西包括用户在文本框输入的东西，它会进行复用。
解决办法：加上key属性，他会对比是否一致而决定复用还是创建新的东西

<body>
    <div id="app">
        <span v-if='isUser'>
            <label for="acount"> 用户账号</label>
            <input type="text" id="name" placeholder="用户账号" key="name">
            //加上key可以防止复用
        </span>
            
        <span v-else>
            <label for="email"> 用户账号</label>
             <input type="text" id="email" placeholder="用户邮箱" key="email" >
        </span>
           
        <button @click='qiehuan()'>切换类型</button>
    </div>
    
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                isUser:true
            },
            methods: {
                qiehuan(){
                    this.isUser=!this.isUser
                }
            }
        })
    </script>
</body>

v-show=“布尔值” 决定是否显示，但是会创建出来，只是隐藏了

！！！当显示和隐藏切换很频繁的时候用 v-show当只执行一次的时候用 v-if

============================================================================

计算属性：
computed:{ }
一般里面的元素会有get方法和set方法，但一般只用get方法，就变成了只读属性
所以放在 { { } } 里面不用加（）

计算属性与方法的区别：

计算属性更像是一个值，假如变量没变它会直接取上一次的计算结果
方法就像是一种做法，每次调用不管结果有没有改变，它都会重新做一次

1、不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问函数时计算属性会立即返回之前的计算结果，而不必再次执行函数。

2、methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。

3、对于任何复杂逻辑，你都应当使用计算属性。

<body>
    <div id="app">
        <h2>年龄总和：{{fullage}}</h2>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el: '#app',
            data: {
                message: [       {id:01,tel:12251561235,name:'小王',age:11},
                                        {id:01,tel:12254856235,name:'小王',age:12},
                                        {id:02,tel:14564556235,name:'小红',age:13},
                                        {id:03,tel:12453261235,name:'小明',age:14},
                                        {id:04,tel:12533361235,name:'小白',age:15},
                                        {id:05,tel:12251355235,name:'小秋',age:16},
                             ]
               
            },
            computed:{
                fullage:function(){
                    let result=0
                    for(let i=0;i<this.message.length;i++)
                    //ES6语法   for(let i in this.message)要用变量接this.message[i]
                    //ES6语法   for(let message of this.message )直接使用message就是结果
                    {
                        result+=this.message[i].age
                    }
                    return result
                }
            }
        })
    </script>
    
</body>

！！！！要是方法里面需要传参，则需要在html代码里面加上（若干参数），如果不加，直接写方法名字会获取浏览器的event事件

在html中想手动获取event事件，则使用 $event 来获取！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

=============================================================================

ES6 —> 块级作用域：
var 没有块级作用域是javascript的设计缺陷
let 有块级作用域，是var的升级版,代码块之间变量不会影响，在 if 和 for 也有

ES5：
if、for都是没有块级作用域
函数有块级作用域

{
var a="why"
console.log(a)
}//代码块

console.log(a)

==============================================================================

const：将变量修饰为常量，不能再赋值，用const时必须赋值
建议： 在 ES6 开发中优先使用 const，只有在需要改变某个标识符时才使用 let

常量得含义：是指向的对象（地址）不能改变，但是对象（地址）的属性可以改变

const obj={
		name：'why'，
		age：18，
		height：1.88
}

obj.name='kobe';
obj.age=40;
obj.height=1.87

==============================================================================

ES6写法：

对象字面量属性的增强写法：


const name='小明'
const age=18
const height=175

const obj={
		name，
		age，
		height
}

对象字面量函数的增强写法：


const obj={
	run()
}

==============================================================================

让数组可以通过响应式改变的方法：

当在创建函数时括号里面有（…num）的时候代表可以传可变参数，个数不限制

1、push（）在末尾添加
2、pop（）在末尾删除
3、shift（）在首位删除
4、unshift（）在首位添加
5、.splice(2,3,‘11’,‘22’,‘33’)
第一个参数是在数组（哪个位置）替换
第二个参数（替换几个）填0且不写后面的参数的话会把后面的元素都删了
---------------------------------如果填0还写后面的元素就会直接添加
第三个以后的参数是替换后的元素，原理：先删后添加
6、sort（）排序
7、reverse（）反转
8、vue.set（this.arry，索引，“元素内容”）与splice类似，但不推荐

注意：注意不能使用索引进行修改数组元素，因为vue没有进行监听，不会重新渲染页面
--------this.arry[0]=“aaa”-----------这种方法是不行的

替换：
splice(2,3,‘11’,‘22’,‘33’)

<body>
    <div id="app">
        <ul>
            <li v-for="item in arry"  :key="item">{{item}}</li>
        </ul>
        <button @click.prevent="expression()">替换</button>

    </div>
    
    <script>
        const vm=new Vue({
            el:'#app',
            data:{
                arry:['a','b','c','d','e','f','g','h','i','j']
            },
            methods: {
                expression(){
                    this.arry.splice(2,3,'11','22','33')
                }
                
            },
        })
    </script>
</body>

-Y、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础知识01

===================================================================Mustache语法：{{}} 不仅可以添加变量，也可以添加简单的表达式v-once（后面不接任何东西） :当改变过一次，有这个指令的元素不会改变第二次v-html=”url(带有html标签的值)”：假如系统返回的值带有html标签则可以使用这个方法，可以...
复制链接

扫一扫