Vue入门篇实例解析

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 } })

未完待续。。。。。。