vue1

vue是用来开发网页的，代表标签是div，img；uniapp是用来开发手机端的，代表标签是view，image

安装：

 

 

 

快捷键生成模板，若有别的简写都可以在这里快速生成：

 

 

 

 

{
        "Print to console": {
         "prefix": "vue",
         "body": [
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script>",
             "export default {",
             "  name:",
             "}",
             "",
            "</script>",
            "",
            "<style scoped>",
            "",
            "</style>",
            ""
         ],
         "description": "Log output to console"
        }
    }

 

 

展示变量：

 

控制台测试：

 遍历数组：

 

点击按钮计数： 

 

new Vue里面的this都是这个Vue实例，不像原生js

此处要添加事件，事件的具体处理函数可以写到标签里面，最好写到标签外面：

 

也能写出去，然后会自动利用代理把obj的数据写到app对象中：

 

 可以用2种方式定义el，让它选中元素：

 

 方法一般写到类里面，和对象挂钩，而函数在写到外面，定义成全局的

 div#q:创建id=q的div。

mustache：{{}}

 

 指令v-once:第一次展示的时候变量能用，后来改变量的值就不会再改变了：

 

 v-html可以解析html标签：

v-text：会覆盖内容：

 

 v-pre：原封不动的输出。不再解析：

 

 v-cloak：当有这个属性时，v-cloak所在的div因为样式display就不会显示出来了，而当vue解析把v-cloak去掉后，就能显示内容了

 

 v-bind，写到属性前面可以识别属性中的变量，还可以简写：

 

 

 只有当用vue的时候才能这种格式，换成css则不行

 

 

 还能单独用函数得到返回值：

 

 

 

 另一种表达：数组语法

 

 如果不需要把50px当成变量解析，则‘’:

 

 如果要解析变量：

 

也可以利用函数得到拼接结果：

 

 

使用计算属性computed也可以实现，在调用方法的时候不用像methods那样加()，当要表达某种属性而非动作的时候最好用计算属性，因为在computed中，每个属性里面都包括get和set方法，一般情况下不用set，所以只保留get，因此get也可以省去，但其实意义上就是对属性的get和set。如果还有个div也调用了，那么这个函数只会把相同的结果返回，不会再调用，除非值不同了

computed定义的都是属性（计算属性），通过return来决定属性的值，通过this.fullName可以访问属性：

 

利用计算属性计算总价格：

 

计算属性的set和get：页面加载时会调用get属性显示变量。由于计算属性一般不写set方法，所以可以认为他是只读属性

下面非注释地方可以不写set，如果写了set，可以在控制台测试，设置的新值会改变变量的值，那么div那个地方的显示也变了：

 

 

作用域 ：

 

 ES5的解决思路是使用闭包，ES6是使用let，产生多个作用域，每个作用域有自己的i

闭包解决，因为外面的(i)值传到了里面的(function (i)中，所以外面的i不会对里面的i造成影响：

 

对象的增强写法，下面那一端就等价于注释部分，变量名作为key，变量值作为属性：

 

 

函数的增强写法：

 

v-on事件监听：

 使用语法糖：

如果需要事件对象：

 

 假如还需要其他参数：

 

.stop可以阻止事件冒泡：

 

 .prevent阻止默认事件发生：

 

 

 

 keyup监听键盘按下去然后抬起的事件：

 

 

 如果只想监听enter键：

 .once只允许事件发生一次，不理睬后面发送的事件，下面这个就是只能点击1次：

 条件判断，如果为v-if为false，则不会显示标签内部的东西：

 

 给if加个else，v-else对应的标签紧挨着if对应的标签下面:

 加个else if：

但是通过计算属性来实现更好：

 

 用户登录案例：

 

 

注意，当点击切换按钮之后会，虚拟dom发现有2个input，再查看它们的key值是否相同，如果相同或没有设置，则不会新创建input，但会对比2个input，把不相同的地方替换掉，但是文本框的值还会留着(value=.....)，如果想让它创建新的input，则修改key：

 

 v-show的效果类似于v-if，不同的是它是通过操纵display的：

遍历数组：

 

遍历对象：

 

 

 

for总结：

1.假定books是数组：

book是数组元素，index是索引，index可以省略

v-for="(book,index) in books"

2.假定book是对象：

value是属性值，key是属性名，index是属性的索引值，后2个可以省略：

v-for="(value,key,index) in book

 

优化：如果给每个item绑定一个独一无二的key，那么进行插入操作就会以移位的方式，而不是一一往后复制，性能会提升：

 

数组.splice(2,2)：从索引为2的地方开始往后删掉2个元素

数组.splice(2,0,'Q')：在索引为2的位置（删除0个元素）插入元素Q；

数组,splice(2,3,'a','b','c')：从索引为2开始，替换三个元素为abc

数组方法：

 以上的数组方法都是响应式的，vue会一直监听着，一旦元素发生了改变页面也就改变了，而通过arr[0]='a'这种方法是不会有反应的。

下面也是响应式的：

 

作业：

 展示四个li，初始时第一个li是红色，之后点击哪里li哪个li就变红色：

 

 

 

 

案例：

添加filter属性可以把数据进行格式转化，比如此处可把85转换成￥85.00格式

js中：

 

 html中：

 

关键代码：

js的：

 

 

 

 html：

 

 

 补充：另外一种方式计算总价格(非注释)：

 

第三种方式：

高阶函数filter:

有多少元素就会遍历多少次，filter将一个函数作为参数传入，n代表每个元素，当返回值为true，则把参数n放到新数组中，否则不管。

下面为将<100的数字拿出来放到新数组中：

map也是会遍历所有元素，把每次return返回的值收集到一起

下面是：对数组的每个元素*2：

reduce:遍历所有元素：

由于第二个参数是0，所以第一个参数中的preValue就是0，n是数组中第1个元素

第二次遍历时，preValue是第一次return后的结果，而n是数组中第二个元素

第三次遍历时，preValue是第二次return的结果。下面为计算数组中的所有元素的和：

 

 3个函数结合使用：实现将所有<100的元素*2，最后再将它们累加：

等价于：

利用高级函数计算上面总价格的新方式：

 v-model：

双向绑定表单内的值和属性：改变了下面的message，上面的input也会变，反之也成立。此时也不用写value了。也能给textare

 

 实现原理，input是只要文本框发生变化就会触发（刚按下键就会触发）：

 

v-model和radio的结合：当都注册了v-model之后，就不用给radio写name属性了：

这里加上label之后点击汉子就能选中单选框了：

 

v-model和checkbox单选框结合：

 

 

 和多选框结合：

 

和select单选结合：

 

 和select多洗：

 

 值绑定，为了不把value写死：

 

修饰符，.lazy可以实现当用户不想实时通过model更新时，只想在文本框失去焦点或者输入完成后敲击回车，才会发生赋值操作：

 

trim可以先把输入进去的字符串去除空格：

 

组件化，一次注册，多次使用：

注意最后使用组件的时候要放到vue管理的id=app的div中

 

 

 以上注册组件的方式是全局注册，当有另外一个const app2=new Vue({})时，也能在app2所管理的地方使用组件，以下为注册局部组件，这样app2就不能使用组件了：

 

父子组件：

Vue实例是根组件，是别的组件的祖宗，是cpn2的父组件

把cpn1组件注册到cpn2中，这样cnp2中就可以使用cpn1的标签，cpn2是父组件，cpn1是子组件：

 

 

 语法糖一步注册全局组件：

 

 语法糖注册局部组件：

 

将模板写外面去，通过属性中的id绑定到一起：

 

 抽离模板的另一种方法（常用），注意要在template标签里面用一个大标签div或span等包住，这样能有样式，模板就是一种定义，定义好了外面想用多少就用多少：

 组件开发3个计数器，由于data函数每调用一次都会返回不同的对象，所以这三个组件之间的数据是不会相互影响的：