欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue入门篇实例解析

程序员文章站 2023-03-31 15:14:29
vue入门篇 基础语法 双括号和指令 {{ xxx}} ==>写在html标签中的变量( {{foo}} ) 双括号可以填写的内容有:变量。表达式。函数,三目运算(data中的数据,和) {...

    vue入门篇

    基础语法 双括号和指令

    {{ xxx}} ==>写在html标签中的变量(

    {{foo}}

    )

    双括号可以填写的内容有:变量。表达式。函数,三目运算(data中的数据,和)

    {{foo()|| foo>02:3 || foo}}

    当一个 vue 实例被创建时,它向 vue 的响应式中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

    new vue({
        el: '#demo',  //当前父级dom
        data: {     //存放数据
            foo: "foo",
            bar: 'bar',
            num: 0,
            value: 'bai'
        },
        methods: {  //普通函数
            add: function () {
                this.num++
            }
    
        },
        computed: {  //计算属性函数 监听数据第一种方法 里面为同步类型的函数 只监听与自己有关的数据
            change: function () {
                return this.num > 5  '大于5' : '小于5'
    
            }
        },
        watch: {   //监听第二种方法  里面可以为异步类型的方法
            num: function () {   //监听谁就用谁做函数名,因为你
                var self = this
                if (self.num > 6) {
                    settimeout(function () {
                        self.num = 0
                    }, 1000)
                }
            }
        },
    })

    new的时候会把data和methods的全部挂到vue这个对象上

    v-on:xxx (绑定某某事件,简写@)(对于绑定事件的处理函数如果没有传参,那么他的默认第一个参数为事件源对象)

    v-bind:xxx (标签内,比如a标签的href)简写:

    v-noce 固定值

    v-html 后面写需要渲染的dom节点(把数据当成dom节点分析)不到万不得已不去使用

    v-on:fn 和 v-on:fn(a,b)

    第一种不传参,函数执行时,默认第一位形参为事件源对象 第二种传参为自定义参数,如果第二种情况需要获取到事件源对象

    需要特定的参数格式:$event

    事件修饰符:阻止冒泡,阻止事件默认行为

    传统方式阻止:给子dom添加事件,然后事件函数添加 e.stoppropagation

    vue方式:v-on:mousemove.stop ==>阻止了冒泡

    相对应的还有一个阻止事件默认行为:

    v-on:mousemove.prevent ==>取消默认事件行为 (支持链式调用)

    按键修饰符:

    v-on:keyup.enter ==> 当键盘按enter时候回触发对应的事件函数 (也支持多键调用,也可以输入相对应的键值(13))

    组合键。。

    v-model指令,它能轻松实现表单输入和应用状态之间的双向绑定。

    计算属性:computed:{ 函数} //监听数据第一种方法 (同步代码,当数据发生变化就会立即执行操作)

    和函数执行不同的两点:

    1.不用写() 函数会自己执行

    2.和函数无关时候不会执行

    watch :{函数} //监听数据第二种方法(可以写异步操作)

    computed 和 wacth 的区别:

    computed 需要返回值 wacth只需要逻辑操作

    动态添加样式:

    方式一:动态添加class(类的增删改查)

    方式二:动态改变内联style (属性的增删改查)

    vue给v-bind:class 和v-bind:style 进行了 特殊的包装 , 一般后面跟着的是一个变量,但是这里给他们添加了一个对象形式

    可以直接写相对应的类和属性

    
    

     

    iscircle 定义在data中的一个变量 ,circle定义在css上的一个class类。(:class=“{这里是一个对象}”)

    当iscircle 的布尔值为真的时候,就添加上circle这个class

    针对于要添加多个class的时候 有一下写法:

    
    

     

    methods: { addclass:function(){ return{ circle: this.iscircle, blue: !this.iscircle } } }

    style也有相类似的写法

    写在对象内:

    
    

     

    当是变量的时候:

    
    

     

    computed: { //计算属性函数 add: function () { return { borderradius:'50%' } }

    v-if

    v-else-if

    v-else

    teplate 标签(包裹标签 自己不占dom结构)相当于一个容器 容器标签

    v-show ———— 给dom元素添加了隐藏属性 display:none(还能再次查找)

    列表渲染:

    v-for = "(item index 。。。) on xxx"循环 遍历一个数组或者对象 数字 字符串。。。

    想直接改变数组内的元素是无法检测到的 必须传新的数组(新地址)

    数组的push方法被vue重写 其他方法也有 改变数据会被监测

    v-bind:key="xx" 给标签独一无二的属性

    系统是 vue 的另一个重要概念

    vue使用注意:

    不要在选项属性或回调上使用箭头函数,

    比如 created: () => console.log(this.a) 或 vm.$watch('a', newvalue => this.mymethod())。

    因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 vue 实例,

    经常导致 uncaught typeerror: cannot read property of undefined

    或 uncaught typeerror: this.mymethod is not a function 之类的错误。

    组件库:

    自定义标签

    vue.component()

    vue.component("my-p", {  //组件标签名
                                //组件必须有根节点
        template: `            
        

    联系方式

    联系电话{{el}}

    `, data:function(){ //data数据必须以函数形式,返回对象与new的vue实例不同 return{ el:122312412412 } } }) new vue({ el: "#app" })

    为什么data为函数:如果组件里data为一个对象。那么创建多个组件时候。一个组件的data数据改变了另外组件的数据也会跟着变。这不是我们想要的!!!

    全局组件和局部组件:上面的是全局都可以使用的组件。下面写在一个vue实例里只有他自己能调用

    var com = {  //组件标签名
        //组件必须有根节点
        template: `            
        

    联系方式

    联系电话{{el}}

    `, data: function () { //data数据必须以函数形式,返回对象与new的vue实例不同 return { el: 122312412412 } } } // vue.component("my-p" ) new vue({ el: "#app", components: { //局部组件库 'my-p':com } })

    未完待续。。。。。。