Vue.js学习笔记

最新推荐文章于 2023-07-19 09:32:51 发布

Bravery丶

最新推荐文章于 2023-07-19 09:32:51 发布

阅读量240

点赞数 2

分类专栏：笔记文章标签： Vue

本文链接：https://blog.csdn.net/weixin_44637711/article/details/89375772

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

vue.js

考虑这个需求：我们要把一个 json对象的数据，显示到一个元素上去。
导入 vue.js 要用到的库： vue.min.js

基本语法

<script src="@{'/public/javascripts/vue.min.js'}" type="text/javascript"></script>
<body>
<div id="div1">{{data.name}}</div>
<script>
    var json={"name":"py"}
    new Vue({
        el:'#div1',
        data:{
            data:json
        }
    })
</script>

基本语法

监听事件v-on/@

代码示例

<div id="div1">
    点击{{times}}次
    <button @click="click">点击</button>
</div>

<script>
    new Vue({
        el:'#div1',
        data:{
            times:0
        },
        methods:{
            click:function () {
                this.times++;
            }
        }
    })
</script>

在这里插入图片描述
代码示例

事件修饰符

stop

事件修饰符阻止冒泡 .stop

.prevent

事件修饰符阻止提交 .prevent

注：只有超链和form这种会导致页面刷新的操作，.prevent 才有用。普通的不导致页面刷新的按钮，加上这个没有任何变化。

.capture

事件修饰符优先触发 .capture

.self

事件修饰符只有自己能触发，子元素无法触发.self

.once

事件修饰符只能提交一次 .once

条件语句 v-if/v-else/v-if else

v-if

<div id="div1">
    <button @click="click">
        切换隐藏/显示
    </button>
    <div v-if="show">内容</div>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            show:true
        },
        methods:{
            click:function () {
                this.show=!this.show;
            }
        }
    })
</script>

在这里插入图片描述

v-else

<div id="div1">
    <button @click="click">
        买彩票
    </button>
    <div v-if="show">中奖</div>
    <div v-else="show">谢谢惠顾</div>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            show:true
        },
        methods:{
            click:function () {
                this.show=Math.random()<0.1;
            }
        }
    })
</script>

在这里插入图片描述

v-else-if

<div id="div1">
    <button @click="click">
        买彩票
    </button>
    <div v-if="show>70">中大奖</div>
    <div v-else-if="show>50">中奖</div>
    <div v-else>未中奖</div>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            show:true
        },
        methods:{
            click:function () {
                this.show=Math.random()*100;
            }
        }
    })
</script>

在这里插入图片描述

循环语句 v-for

代码示例

<div id="div1">
    <table>
        <tr>
            <td>name</td>
            <td>hp</td>
        </tr>
        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>
    </table>
</div>
<script>
    var data = [
        {name:"盖伦",hp:341},
        {name:"提莫",hp:225},
        {name:"安妮",hp:427},
        {name:"死歌",hp:893}
    ];
    new Vue({
        el:'#div1',
        data:{
            heros:data
        },
    })
</script>

在这里插入图片描述

index索引用法v-for=" Object,index in LIst"

<div id="div1">
    <table>
        <tr>
            <td>name</td>
            <td>hp</td>
        </tr>
        <tr v-for=" hero,index in heros">
            <td>{{index}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>
    </table>
</div>
<script>
    var data = [
        {name:"盖伦",hp:341},
        {name:"提莫",hp:225},
        {name:"安妮",hp:427},
        {name:"死歌",hp:893}
    ];
    new Vue({
        el:'#div1',
        data:{
            heros:data
        },
    })
</script>

在这里插入图片描述

纯数字遍历

还是需要Vue声明范围

<div id="div1">
    <div v-for="index in 10">{{index}}</div>
</div>
<script>
    new Vue({
        el:'#div1'
    })
</script>

在这里插入图片描述

属性绑定

v-bind

<a v-bind:href="page"百度

<div id="div1">
    <a v-bind:href="page">百度</a>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            page:'http://www.baidu.com'
        }
    })
</script>

在这里插入图片描述

简写 V-bind:href="" ->:herf=""

双向绑定

v-model

<div id="div1">
    <input type="text" v-model="name"><br>
    <button @click="look">查看</button>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            name:''
        },
        methods:{
            look:function () {
                alert(this.name)
            }
        }
    })
</script>

在这里插入图片描述

.lazy

v-model.lazy=“xxx”
对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。
但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了

.number

v-model.number=“xxx”
有时候，拿到了数据需要进行数学运算，为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型了。

.trim

v-model.trim=“xxx”
trim 去掉前后的空白

计算属性:computed

如果运算过程比较复杂，那么维护起来就比较麻烦。
{{ rmb/exchange }}

<div id="div1">
    汇率:<input v-model.number="exchange"><br>
    RMB:<input v-model.number="rmb"><br>
    $:{{dollar}}
</div>
<script>
  new Vue({
      el:'#div1',
      data:{
          exchange:6.4,
          rmb:0,
      },
      computed:{
          dollar:function () {
              return this.rmb/this.exchange;
          }
      }
  })
</script>

在这里插入图片描述
注:method 也能达到一样的效果，调用的时候，要加上括号
{{ getDollar() }}

computed 和 methods 的区别

computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。这样如果是复杂计算，就会节约不少时间。
而methods每次都会调用

watch

vue可以通过watch来监听属性值的变化。

<div id="div1">
    汇率:<input v-model.number="exchange" type="number"><br>
    RMB:<input v-model.number="rmb" type="number"><br>
    $:<input v-model.number="dollar" type="number"><br>
</div>
<script>
  new Vue({
      el:'#div1',
      data:{
          exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          dollar:function (val) {
              this.dollar=val;
              this.rmb=this.exchange*this.dollar;
          },
          rmb:function (val) {
              this.rmb=val
              this.dollar=this.rmb/this.exchange;
          }
      }
  })
</script>

在这里插入图片描述

过滤器filter

<div id="div1">
    <input v-model="str">
    <div>{{str|fa|fb}}</div>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            data:'',
        },
        filters:{
            fa:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
            },
            fb:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
            }
        }
    })
</script>

在这里插入图片描述

全局过滤器

Vue.filter('fa', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})

组件&自定义指令&路由略

对于后端er,主要想学会vue传json渲染前端

vue的Ajax axios.js

需要引入axios.min.js
axios.js

<script>
    var url="/user"
    axios.get(url).then(function (value) {
    	//value.data是Object对象
        var json=JSON.stringify(value.data)
        document.getElementById('div1').innerHTML=json;
    })
</script>

等价于vue的axios

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190418165833306.png) 异步请求遍历json数组

<div id="div1">
<table>
    <tr>
        <td>name</td>
        <td>age</td>
    </tr>
    <tr v-for="j in json">
        <td>{{j.name}}</td>
        <td>{{j.age}}</td>
    </tr>
</table>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            json:[],
        },
        mounted:function () {
            var self=this
            var url="/users"
            axios.get(url).then(function (value) {
                self.json=value.data;
            })

        }
    })
</script>

在这里插入图片描述

Bravery丶

关注

2
点赞
踩
0

收藏

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

vue.js学习vue.js基本语法监听事件v-on/@代码示例事件修饰符stop.prevent.capture.self.once条件语句 v-if/v-else/v-if elsev-ifv-elsev-else-if循环语句 v-forvue.js考虑这个需求：我们要把一个 json对象的数据，显示到一个元素上去。导入 vue.js 要用到的库： vue.min.js基本语法...
复制链接

扫一扫