vue基础之一 ----介绍和基本指令

最新推荐文章于 2023-01-05 19:18:28 发布

qq_39775617

最新推荐文章于 2023-01-05 19:18:28 发布

阅读量337

点赞数 3

分类专栏： vue开始文章标签： vue基础

本文链接：https://blog.csdn.net/qq_39775617/article/details/82226194

版权

vue开始专栏收录该内容

2 篇文章 0 订阅

订阅专栏

类名绑定
v-bind:class=”{类名 : 表达式}”
当表达式为真,继承类名,为假不继承
简写:
:class=”{}”
所有的v-bind都可以被简写为一个冒号
v-bind:disabled=”表达式”
当表达式为真,当前元素不可用,反之可用
简写:
:disabled=”表达式

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

2,事件绑定 v-on
v-on:click=”” 单击事件
简写:@click=””
v-show=”true|false” 元素是否显示
相当于display:none|block;

``<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

3,v-if,v-else
v-if 和 v-show是兄弟关系,可以做到相似的功能
注意:
v-if和v-else 两者之间不能有其他元素,否则v-else失效

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

4,键盘事件
组合键: @keyup.ctrl.alt.shift.enter=”执行的事件”
单键: @keyup.enter=”alert(666)”

<div id="box">
            <h4>键盘事件</h4>
            <input type="text" value="请按回车" @keydown="show1($event)" />
            <hr />
            <h4>简写</h4>
            <input type="text" value="请按回车" @keydown.13="show2()" />

            <input type="text" value="请按回车" @keydown.enter="show2()" />
            <hr />
            <input type="text" value="请按B键" @keydown.66="show3()" />

            <input type="text" value="请按B键" @keydown.b="show3()" />
        </div>


        <script type="text/javascript">
            var Demo = new Vue({
                el:'#box',          //el中为选择器
                data:{              //data中为数据

                },
                methods:{           //事件
                    show1:function(ev){
                        if(ev.keyCode==13){
                            alert('你按了回车键')
                        }
                    },
                    show2:function(){
                        alert('你按了回车键')
                    },
                    show3:function(){
                        alert('你按了B键')
                    }
                }
            })
        </script>

5,v-for
v-for=”(item,index) in list”
v-for=”(item,index) of list”

    1<div id="box">
 2     <ul>
 3         <!--ng-repeat-->
 4         <li v-for="item in arr">
 5             <span>{{item.name}}</span>
 6             <span>{{item.age}}</span>
 7         </li>
 8     </ul>
 9 </div>
10 <script type="text/javascript">
11     new Vue({
12         el:'#box',
13         data(){
14             return{
15 //                arr:['module','views','controlle','aaaaa']
16                 arr:[
17                     {"name":"xiaohong1","age":12},
18                     {"name":"xiaohong2","age":12},
19                     {"name":"xiaohong3","age":12},
20                     {"name":"xiaohong4","age":12}
21                 ]
22             }
23         }
24     })
25 </script>

    使用of最接近js的迭代器语法
使用v-for循环一个对象
当使用v-for循环一个常数时:
    vue1.x版本是从0开始算的
    vue2.x版本是从1开始算的
卸载vue2.x : npm uninstall --save-dev vue
安装vue1.x : npm install --save-dev vue@1

6,v-bind
v-bind:class=”{cur : isShow}}”
:class=”{cur : i % 2 == 0}”
:src=”../images/1.png”
:class=’[ss,aa,{cur : i % 2 == 0,cc : isShow}]’
:style=”{color:’white’,background:’rgb(230,33,100)’}}”

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>



<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

7,计算属性
computed
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
这就意味着只要 a还没有发生改变，多次访问 pingfang 计算属性会立即返回之前的计算结果，而不必再次执行函数。
我们为什么需要缓存？
假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！
如果你不希望有缓存，请用方法来替代。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box" >
            <h3>只能输入数字</h3>
            <input type="number" v-model="num_a"  />
            <p>num_a====> {{num_a}} </p>
            <p>num_b====> {{num_b}} </p>
            <p>num_c====> {{num_c}} </p>
            <input type="button" @keydown="fn()" value="点击我" />
        </div>


        <script type="text/javascript">
            new Vue({
                el:'#box',          //el中为选择器
                data:{              //data中为数据
                    num_a:1,
                    num_b:2
                },
                methods:{
                    fn:function(){
                        //可以看到我在函数中改变了num_c的值 但是其并没有改变
                        this.num_c = 101;
                    }
                },
                computed:{
                    num_c:function(){//这里的num_c不是一个函数，而是一个属性，num_c的值取决于他return的值
                        //业务逻辑代码
                        return parseInt(this.num_a)+parseInt(this.num_b)
                    }
                }
            })
        </script>
    </body>
</html>

**总结

列表内容

**vue 是什么
2
3 简介型的javascript框架个人开发 (刘雨溪)
4
5 特点：mvvm m=mvc module 模型 v=view 视图 c=controller 控制器
6 mvvm m=mvc module 模型 v=view 视图 vm (视图与数据之间的传递)
7 vue1 双向数据绑定 vue2 单向数据流
8 单页面应用
9
10
11
12
13 v-model 数据绑定
14 data 返回对象用 return
15
16 v-for 循环格式 v-for=”字段名 in(of) 数组json”
17
18 v-show 显示隐藏传递的值为布尔值 true false 默认为false
19
20 v-if 显示与隐藏和v-show对比的区别就是是否删除dom节点默认值为false
21
22 v-else-if 必须和v-if连用
23
24 v-else 必须和v-if连用不能单独使用否则报错模板编译错误
25
26 v-bind 动态绑定作用：及时对页面的数据进行更改
27
28
29
30 v-on 绑定事件函数必须写在methods里面
31 @click 快捷方法
32
33 v-text 解析文本
34
35 v-html 解析html标签
36
37 v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三目型 ‘isred?”red”:”blue”’ 3、数组型 ‘[{red:”isred”},{blue:”isblue”}]’
38
39 v-once 进入页面时只渲染一次不在进行渲染
40
41 v-cloak 防止闪烁
42
43 v-pre 把标签内部的元素原位输出