学习vue.js

最新推荐文章于 2024-06-12 08:41:10 发布

major_tom

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/qq_36402372/article/details/79977240

版权

最近除了我在优化以及测服务端并发，还有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>

major_tom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue.js

最近除了我在优化以及测服务端并发，还有mq的优化其他人在用vue.js写项目的前端我真的是一点也不会才懒得看虽然主要做服务端，还是学习下，不好前端怪尴尬的，万一以后面试招全站呢？欢声笑语打出GG 要有后端服务端工程师的坚持v-bind属性&lt;div id="app"&gt;&lt;div v-html="message"&gt;&lt;/div&gt;...
复制链接

扫一扫