学习vue.js

原创 2018年04月17日 16:50:41

最近除了我在优化以及测服务端并发,还有mq的优化

其他人在用vue.js写项目的前端

真的是一点也不会 才懒得看

虽然主要做服务端,还是学习下,不好前端怪尴尬的,万一以后面试招全站呢?
欢声笑语打出GG 要有后端服务端工程师的坚持

v-bind属性

<div id="app">
<div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>I wanna leave</h1>'
  }
})
</script>
我注意到,html 并不是div的一个属性,所以是用v-html
其他的比如id,class等都是用的  v-bind-id = "id"  v-bind-class = "class"
v-bind-id
v-bind-class
v-bind-href
<p v-if ="seen"></p>    这个可以控制是否显示
v-html
v-if
v-on:click
v-model  //值
v-on:submit
v-show    //true 和 false

Vue.js 提供了完全的 JavaScript支持

{{就和普通的js一样,还可以创建变量的,改变变量}},我发现js写的变量依然可以绑定到v-bind,v-if等上面

过滤器

<div id="app">
  {{ message | capitalize("ss",aa)}}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob',
      aa:"和你贴心的流浪"
  },
  filters: {
    capitalize: function (value,value1,value2) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)+value1+value2
    }
  }
})
</script>

缩写

<a :href="url"></a>
<a @click="doSomething"></a>

条件和循环语句

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<ol>
<li v-for = "item in items">
    {{item.name}}
</li>
<ol>

<template v-for="item in items">    
    <li>{{item.name}}</li>
</templacte>

<template v-for="(value,key,index) in object">    
    <li>{{value}}</li>
    <li>{{index}}</li>
</templacte>

<template v-for="(value,index) in list">    
    <li>{{value}}</li>
</templacte>      

  <ul>
    <li v-for="n in 10"> 
     {{ n }}
    </li>
  </ul>    
  跟最近学的python有点像

计算属性

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'battle!'
  },
  computed: {
// 计算属性的 getter
reversedMessage: function () {
  // `this` 指向 vm 实例
  return this.message.split('').reverse().join('')
}
  }
})   

可以用methods代替    computed

监听

  <div id = "computed_props">
     千米 : <input type = "text" v-model = "kilometers">
     米 : <input type = "text" v-model = "meters">
  </div>
   <p id="info"></p>
  <script type = "text/javascript">
     var vm = new Vue({
        el: '#computed_props',
        data: {
           kilometers : 0,
           meters:0
        },
        methods: {
        },
        computed :{
        },
        watch: {
            meters:function(value){
                this.meters = value;
                this.kilometers = value / 1000;
            },
            kilometers:function(value){
                this.kilometers = value;
                this.meters = value*1000
            }
        }
     });
     // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
            document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
    })
  </script>

class

有分隔符号的  -  需要用 ‘’  ,否则不需要

<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
width: 150px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
 v-bind:class="{ active: isActive, text-danger: hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
hasError: true
  }
})
</script>
还能用object以及数组来代替呢
    <div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
    </div>

    <script>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
内联样式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">夜空中</div>
</div>

<div id="app">
  <div v-bind:style="styleObject">夜空中</div>
</div>

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">夜空中</div>
</div>

事件处理器

v-on:click
v-on:keyup.13
v-on:keyup.enter  v-on:keyup.alt
@keyup.enter

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

表单

<div id="app">
  <p>单个复选框:</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>

  <p>多个复选框:</p>
  <input type="checkbox" id="runoob" value="穿越" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="红尘" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="的悲欢" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</  div>

<script>
new Vue({
  el: '#app',
  data: {
checked : false,
checkedNames: []
  }
})
</script>

    .lazy
    在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
    如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

<input v-model.number="age" type="number">
这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

<input v-model.trim="msg">



<div id="app">
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>

<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
return {
  counter: 0
}
  },
  methods: {
incrementHandler: function () {
  this.counter += 1
  this.$emit('increment')
}
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
incrementTotal: function () {
  this.total += 1
}
  }
})
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36402372/article/details/79977240

初学vue.js——学习笔记一

工作之余不忘学习,不怕学得晚,就怕不坚持。加油! 1、双向绑定 (v-model:P和input内容同步更新) html:    {{message}}    v-model="message">...
  • dihuiqin
  • dihuiqin
  • 2016-08-05 11:28:23
  • 2742

1.学习使用vue.js(适合初学者)

如果你不愿意多花时间去自学vue.js 官网的API,那么你可以在跟着下面的例子学习最实用,最容易上手的案例。首先要你必须要去VUE官网上下载vue.js,然后才能继续下面的步骤。 如果你不想下载的...
  • heshuaicsdn
  • heshuaicsdn
  • 2018-01-02 10:17:03
  • 996

Vue.js学习之路—项目中实战学习(一)

在three中已经创建好了工程,接下来就在工程中开始学习。首先我们跟着官网中的第一个小例子来学习,先来看看这个小例子。 {{message}} ...
  • Longyu144714
  • Longyu144714
  • 2017-05-24 22:03:14
  • 610

vueJS学习总结

来源本人:https://github.com/chanchanliuvue-router 学习笔记目录绑定一个元素 如果new Vue不写在$(document).ready(function(...
  • chanchanliu1117
  • chanchanliu1117
  • 2016-12-09 11:21:10
  • 763

Vue.js学习文档

  • 2017年06月12日 20:48
  • 227KB
  • 下载

Vue.js零基础学习笔记(一、二章Vue介绍)

作为一个iOS开发从业者,前段时间因为公司的需求刚刚学习并开发完成一个属于前端开发工程师的任务-微信小程序(因为公司规模较小,人员配置不完全,十分无奈),深有感慨。对于移动端原生开发的iOS,Andr...
  • wtdask
  • wtdask
  • 2017-06-07 10:31:06
  • 709

vue.js 由浅至深学习宝典

一. 资源教程 http://www.vue-js.com/topic/56cfc64965cf1c422e006834 http://www.vue-js.com/中文社区 综合类 ...
  • sinat_17775997
  • sinat_17775997
  • 2016-08-18 21:43:55
  • 3317

学习Vue.js实战(一)

Vue.js是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。(所谓Progressive,就是可以一步一步的有阶段性的使用vue.js。其简单小巧,压缩后...
  • qq_33242126
  • qq_33242126
  • 2018-03-14 14:40:54
  • 52

学习vue.js心得

编写时间2017-2-7 vue.js编写方式是通过html格式调用模版(元素/标签),这里面的模版可以是template的xml格式,也可以是javascript代码。 组件之间的通信: 父子...
  • masterShaw
  • masterShaw
  • 2017-02-07 15:39:49
  • 724

Vue.js学习资料集(持续更新中)

一、资源类文档 vue官方文档 vue 1.0 文档地址 vue论坛 视频教程 vue1.0入门教程 台湾小凡视频教程 二、社区 segmentfault-vue 知乎-vue 三、组件1、官方组件 ...
  • skyeTang
  • skyeTang
  • 2016-07-04 21:36:41
  • 19570
收藏助手
不良信息举报
您举报文章:学习vue.js
举报原因:
原因补充:

(最多只允许输入30个字)