vue基础

最新推荐文章于 2023-06-25 10:47:00 发布
最新推荐文章于 2023-06-25 10:47:00 发布
阅读量339 收藏 1
点赞数
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_dark/article/details/108103707
版权

1.VueJs的介绍和MVVM模式介绍

1.什么是VueJS？

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 API 实
现响应的数据绑定和组合的视图组件。 它不仅易于上手， 还便于与第三方库或既有项目整合。

官网：https://cn.vuejs.org/

2.MVVM模式

Model-View-ViewModel 模型-视图-视图模型，主要目的是分离视图（View） 和模型（Model） ，从而实现视图 与 模型的双向绑定！！！

在这里插入图片描述

2.vue.js下载及安装（直接引入js文件）

1.下载地址：https://vuejs.org/v2/guide/installation.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rOUm6Jqk-1597825389894)(assets/1597629448245.png)]

2.下载js文件后引入

3.VueJs的快速入门

1…建立项目，建立vue.js文件

2.建立html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

<!-- div就是视图 -->
<div id="app">
    {{message}}
</div>


<script>
    //Vue对象视图模型对象（VM对象）
    new Vue({
        el: '#app',  // 绑定视图
        data:{  // data就是模型（数据）
            message:'VueJS入门程序'
        }
    })

</script>


</body>
</html>

4.VueJs的插入值表达式

插入表达式语法：

{{message}}

插入表达式作用：

1.直接获取模型数据

2.进行四则运算

3.进行三目运算

<div id="app">
    {{num}}
    <hr/>
    {{num*5}}
    <hr>
    <!--   
       == : 比较内容是否相等
       === : 同时比较内容和类型是否相等
     -->
    {{num===10?'是':'否'}}
    <hr>
</div>

<script>
    new Vue({
        el: '#app',
        data:{
            num: '10'
        }
    })

</script>

插入表达式不合法：

1.不能定义变量

2.不能使用流程控制

<!--{{var name ='eric' }}-->

<!--{{
  if(num==10){
    return '是'
  }else{
    return '否'
  }
  }}-->

5.VueJs指令：v-on指令

v-on 指令，它用于监听 DOM 事件，下面的参数是监听的事件名，可以缩写为@表示

1.事件

1.v-on：click（点击事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-on:click</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{text}}
    <hr>
   <button v-on:click="fun('小苍')">点我</button>
    <hr>
    <button @click="fun('小泽')">点我</button>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            text:'你点了'
        },
        //定义函数
        methods:{
            fun:function (name) {
                alert(name)
                //修改模型的数据！！！
                // text = text + name // 错误用法
                //必须使用this关键来修改模型数据
                //console.log(this)
                this.text = this.text + name
            }
        }
    })
</script>
</body>
</html>

2.v-on：keydown（键盘按下事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-on:keydown</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
   <!-- 获取当前元素方法 $event -->
   转账金额：<input type="text" @keydown="fun($event)">
</div> 
<script>
    new Vue({
        el: '#app',
        data:{

        },
        //定义函数
        methods:{
            fun:function (e) {
                //需求：只能输入数字

                //alert('键盘按下啦')

                //e.keyCode：获取键盘输入的内容
                var keyCode = e.keyCode
                //alert(keyCode)

                //判断不是数字
                if( keyCode < 48 || keyCode > 57){
                    alert('不是数字')
                    //输入的内容不回显到输入框
                    //阻止事件的默认动作
                    e.preventDefault()
                }
            }
        }
    })
</script>
</body>
</html>

3.v-on：mouseover（鼠标移动事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-on:mouseover</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 默认：执行事件冒泡过程 -->
   <div style="background-color: pink" @mouseover="fun1">
       我是一个div
       <textarea rows="4" cols="40" @mouseover="fun2($event)">我是一个多行文本框</textarea>
   </div>
</div>


<script>
    new Vue({
        el: '#app',
        data:{

        },
        //定义函数
        methods:{
            fun1:function (e) {
               alert('经过了div')
            },
            fun2:function (e) {
                alert('经过了textarea')

                //阻止事件冒泡
                e.stopPropagation()
            }
        }
    })
</script>
</body>
</html>
2.事件修饰符(v-on：事件名.事件修饰符)

事件修饰符，就是简化了事件方法的调用

Vue.js 通过由点(.)表示的指令后缀来调用修饰符。

.stop :阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件

.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交(相当于event.preventDefault())

.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式

.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行

.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号

PS:1).passive 和 .prevent 不能一起使用:如果用了.prevent 将会被忽略；

​ 2).self 和 .stop 区别:

  • self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发。
  • stop是从自身开始不向外部发射冒泡信号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-on事件修饰符</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 没有使用事件修饰符 -->
    <form @submit="fun($event)" action="http://www.baidu.com">
        <input type="submit">
    </form>

    <hr>

    <!-- 使用事件修饰符 -->
    <form @submit.prevent action="http://www.baidu.com">
        <input type="submit">
    </form>

    <hr>

    <!-- 没有事件修饰符 -->
    <div style="background-color: palegreen" @click="fun1">
        <a href="http://www.baidu.com" @click="fun2($event)">百度</a>
    </div>

    <hr>

    <!-- 使用了事件修饰符 -->
    <div style="background-color: palegreen" @click="fun1">
        <a href="http://www.baidu.com" @click.stop>百度</a>
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data:{

        },
        //定义函数
        methods:{
            /*fun:function (e) {
                alert('===')
                //阻止默认动作
                e.preventDefault()
            }*/
            fun1:function () {
                alert('点击了div')
            },
           /* fun2:function (e) {
                e.stopPropagation()
            }*/
        }
    })

</script>


</body>
</html>
3.按键修饰符：（v-on：事件名.按键修饰符）

按键修饰符，简化指定按键的逻辑处理

.enter    
.tab      
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-on按键修饰符</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <!-- 没有使用按键修饰符 -->
   用户名：<input type="text" @keydown="login($event)"><br>
    密码：<input type="password" @keydown="login($event)"><br>

    <hr>

    <!-- 使用按键修饰符(按下enter或space键才可触发事件) -->
    用户名：<input type="text" @keydown.enter.space="login"><br>
    密码：<input type="password" @keydown.enter.space="login"><br>
</div>


<script>
    new Vue({
        el: '#app',
        data:{

        },
        //定义函数
        methods:{
            /*login:function (e) {
                //alert(e.keyCode)
                if(e.keyCode==13 ){
                    alert('登录中...')
                }
            }*/
            login:function () {
                alert('登录中...')
            }
        }
    })

</script>


</body>
</html>

8.VueJs指令：v-text与v-html

v-text: 原样输入， 和 {{message}} 的效果一样的

v-html: 采用html格式输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-text与v-html</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
   插入值表达式输出： {{content}}
    <hr>
    v-text输出：<span v-text="content"></span>
    <hr>
    v-html输出： <span v-html="content"></span>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            content:'<h1>今天下雷雨啊，快点回家收衣服啦</h1><span style="color: red">好啊</span>'
        }
    })
</script>
</body>
</html>

9.VueJs指令：v-bind

v-bind: 用于在html标签的属性上绑定模型数据！！！！

v-bind: 指令可以用于响应式地更新 HTML attribute，v-bind可以缩写为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-bind指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
       插入值表达式不能在html标签的属性上面获取模型数据！！！！！
       如果需要在html标签的属性上绑定模型数据，就必须使用v-bind
    -->
   <!-- dataColor是data的数据 -->
   <span v-bind:style="{color: dataColor}">我是小苍</span>
    <hr>
    <span :style="'color: '+dataColor">我是小苍</span>
    <hr>
    <button @click="change">改变颜色</button>
    <hr>
    <a :href="'http://localhost:9001/user/editUser.do?id='+id">编辑用户</a>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            dataColor: 'red',
            id: 300
        },
        methods:{
            change:function () {
                this.color = 'blue'
            }
        }
    })
</script>
</body>
</html>

10.VueJs指令：v-model

v-model: 用于对表单的数据双向绑定！！

注意：v-bind只能做单向绑定（通过模型修改来影响视图）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-model指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
   <!--<form>
       用户名：<input type="text" :value="username"><br>
       年龄：<input type="text" :value="age"><br>
        住址：<input type="text" :value="addr"><br>
       <button @click="update">提交</button>
   </form>-->

    <form>
        用户名：<input type="text" v-model="user.username"><br>
        年龄：<input type="text" v-model="user.age"><br>
        住址：<input type="text" v-model="user.addr"><br>
        <button @click="update">提交</button>
    </form>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            user:{
                username:'小明',
                age:30,
                addr:'广州'
            }
        },
        methods:{
            update:function () {
                alert(this.user.username+"---"+this.user.age+"---"+this.user.addr)
            }
        }

    })
</script>
</body>
</html>

11.VueJs指令：v-for

遍历数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-for遍历数组</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
  <li v-for="(city,index) in citys">{{city}}====={{index}}</li>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
           citys:['东莞','惠州','十巷']
        },
        methods:{

        }

    })

</script>


</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-for遍历对象</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
  <li v-for="(value,name) in user">{{name}}=============={{value}}</li>
</div>


<script>
    new Vue({
        el: '#app',
        data:{
            user:{
                username:'小明',
                age:30,
                addr:'广州'
            }
        },
        methods:{

        }

    })

</script>


</body>
</html>

遍历对象数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-for遍历对象数组</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
  <li v-for="(user,index) in userList">{{user.username}}=============={{index}}</li>

    <hr>

    <table border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        <tr v-for="(user,index) in userList">
            <td>{{index+1}}</td>
            <td>{{user.username}}</td>
            <td>{{user.age}}</td>
            <td>{{user.addr}}</td>
        </tr>
    </table>
</div>


<script>
    new Vue({
        el: '#app',
        data:{
            userList:[
                {
                    username:'小明',
                    age:30,
                    addr:'广州'
                },
                {
                    username:'小红',
                    age:33,
                    addr:'深圳'
                },
                {
                    username:'小王',
                    age:35,
                    addr:'东莞'
                }
            ]
        },
        methods:{

        }

    })

</script>


</body>
</html>

12.VueJs指令：v-if与v-show

v-if: 显示与隐藏，和v-else结合，用于条件判断

v-show: 显示与隐藏，相当于display样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-show  使用display样式来实现显示与隐藏-->
    <!-- <img src="images/mm.jpg" style="width: 200px;height: 200px;" v-show="flag"></img>-->
    <!--  v-if  使用是否加载该标签方式来实现显示与隐藏  -->
    <img src="images/mm.jpg" style="width: 200px;height: 200px;" v-if="flag"></img>
    <hr>
    <button @click="showAndHide">显示与隐藏</button>
    <hr>
    <div v-if="isLogin">
        你好，尊敬小王，<a href="">【退出登录】</a>
    </div>
    <div v-else>
        你好，请登录，<a href="">【免费注册】</a>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            flag: true,
            isLogin: false
        },
        methods:{
            showAndHide:function () {
                this.flag = !this.flag
            }
        }
    })
</script>
</body>
</html>

13.VueJs的生命周期

什么是Vue的生命周期？

Vue的生命周期，就是一些固定的方法，这些固定的方法，会在页面加载的过程中自动触发，这些方法也叫钩子方法。

整个Vue生命周期共有8个方法

创建vue实例前：beforeCreate (无法获取模型数据和调用函数的)

创建vue实例后：created (可以获取模型数据和调用函数的)

挂载到dom前：beforeMount（视图内容没有模型数据）

挂载到dom后： mounted（视图内容绑定了模型数据）

数据变化更新前：beforeUpdate （视图不能看到更新的数据）

数据变化更新后： updated（视图可以看到更新的数据）

vue实例销毁前：beforeDestroy（视图与模型还在绑定状态）

vue实例销毁后：destroyed（视图与模型处于解绑状态）

核心方法：

created

mouted

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>

<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : 'hello world'
        },
        beforeCreate : function() {
            console.log(this);
            showData('创建vue实例前', this);
        },
        created : function() {
            showData('创建vue实例后', this);
        },
        beforeMount : function() {
            showData('挂载到dom前', this);
        },
        mounted : function() {
            showData('挂载到dom后', this);
        },
        beforeUpdate : function() {
            showData('数据变化更新前', this);
        },
        updated : function() {
            showData('数据变化更新后', this);
        },
        beforeDestroy : function() {
            vm.test = "3333";
            showData('vue实例销毁前', this);
        },
        destroyed : function() {
            showData('vue实例销毁后', this);
        }
    });

    function realDom() {
        console.log('真实dom结构： ' + document.getElementById('app').innerHTML);
    }

    function showData(process, obj) {
        console.log(process);
        console.log('data 数据： ' + obj.message)
        console.log('挂载的对象： ')
        console.log(obj.$el)
        realDom();
        console.log('------------------')
        console.log('------------------')
    }

    vm.message = "good...";

    vm.$destroy();
</script>
</body>
</html>

14.VueJs的异步请求：axios介绍

get请求：

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
}); 

//以上请求也可以通过这种方式来发送
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});

post请求：

axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res);
})
.catch(function(err){
console.log(err);
});

axios支持PUT，DELTE等请求

15.案例：用户列表功能

new Vue({
    el:'#app',
    data:{
        userList:[]
    },
    methods:{
        //查询所有用户
        findAll:function () {
            //alert('查询用户列表')

            //console.log(this)
            var _this = this

            //从后台返回数据列表
            var url = 'http://localhost:8080/vuejsDemo/user/findAll.do'

            axios.get(url).then(function (resp) {
                //console.log(resp)

                //获取后台返回数据
                var result = resp.data

                //给模型赋值
                //注意：在axios方面里面获取this是一个Window对象，而不是Vue对象
                //this.userList = result

                //console.log(this)
                _this.userList = result

            })


        }
    },
    created:function () {
        this.findAll()
    }
})

16.案例：用户信息回显

//查询一个对象
findById:function (id) {
   // alert(id)

    var _this = this

    var url = "http://localhost:8080/vuejsDemo/user/findById.do?id="+id

    axios.get(url).then(function (resp) {

        var result = resp.data

        _this.user = result

        //弹出编辑窗口
        $('#myModal').modal('show')
    })

}

17.案例：修改用户功能

//用户更新
update:function () {

    var url = "http://localhost:8080/vuejsDemo/user/update.do"

    var _this = this

    axios.post(url,this.user).then(function (resp) {
        //刷新列表
        _this.findAll()
    })

}
浪子唐少
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
Vue基础（计算属性和观察者）
Vivianluolita的专栏
12-11 461
计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }} </div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次
Vue学习笔记 —— 计算属性
weixin_43340295的博客
10-04 529
一、什么是计算属性？ 模板内的表达式非常便利，但是更适用于简单运算的。放入太多的逻辑会让模板过重且难以维护。例如： <div> {{ message.split('').reverse().join('') }} </div> 上面的表达式中包含了3个操作，看起来也不清晰，所以这种情况下，应该使用Vue的计算属性。 二、计算属性的用法 一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。 上面的例子用计算属性可以写成： <div id=
vue可以直接进行运算么_vue实现计算器功能
weixin_29725791的博客
12-31 135
本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下计算器+-*/new Vue({el: '#app',data: {n1: 0,n2: 0,result: 0,opt: '+'},methods: {calc() {switch (this.opt) {case "+":this.result = parseInt(this.n1) + parseInt(this.n2...
用Vue的三种方法实现加减乘除运算
2302_77154755的博客
04-02 3661
接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算。然后在body里面创建一个div并设置id，我这里给id命名为"app"然后为每个input标签和select标签设置对应的data属性。把写的3种方法分别绑定对应的input标签和select标签。在id命名为"app"的div内使用input标签和。
1.Vue指令
shejiataoBlog
02-07 564
创建 HTML 文件 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="js/vue.global.js"></script> &lt
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
基于vue基础实现的记事本
09-24
本文将详细解析如何基于Vue基础实现一个记事本应用，重点涉及用户数据的增删操作。 首先，我们要理解Vue的核心概念：数据绑定。Vue采用的是双向数据绑定，这意味着视图层与数据模型之间可以相互影响。在创建Vue实例...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue.js实现的经典计算器/科学计算器功能示例
10-18
主要介绍了vue.js实现的经典计算器/科学计算器功能,具有基本四则运算计算器以及科学计算器的功能,可实现开方、乘方、三角函数以及公式运算等功能,需要的朋友可以参考下
vue-model实现简易计算器
10-14
主要为大家详细介绍了vue-model实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【vue】可选链运算符(?.)和空值合并运算符(??):
最新发布
SunPeng的博客
06-25 707
【vue】可选链运算符(?.)和空值合并运算符(??):
vue之逻辑运算
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-20 5824
 一、运费计算 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
自动生成小学四则运算题目的命令行程序 || vue实现
sabot_v的博客
04-13 944
Github项目地址：https://github.com/bravedreamer/test/tree/master/Arithmetic 在线预览：https://bravedreamer.github.io/test/Arithmetic/index.html 项目合作者：sabot 和 他儿子 1.题目说明 实现一个自动生成小学四则运算题目的命令...
vue可以直接进行运算么_Vue 计算属性和使用的小技巧
weixin_36087905的博客
12-31 179
1， 计算属性可以进行复杂的逻辑处理，只要返回一个结果就可以2，每一个计算属性都有setter，getter{{ fullName }}varapp=newVue({el:'#app',data:{firstName:'H',lastName:'L'},computed:{fullName:{...
Vue的计算属性
qq_25461519的博客
07-30 615
这里我们引用Vue.js的官方文档所说的：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： &lt;div id="example"&gt; {{ message.split('').reverse().join('') }} &lt;/div&gt; 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里...
Vue实践--计算属性
codesWay的博客
11-28 1275
简单的文本转换可以通过filters来转换，但是当涉及到复杂的逻辑的时候就要通过计算属性完成了 计算属性都是以函数的形式写在computed选项中，计算属性中的this指向Vue实例本身，只要最后有返回的值就行，  /* getter与setter (博客上见)*/ var myApp1 = new Vue({ el:"#container1", data:{ fi
Vue基础、vue实战
05-17
以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值