初学vue2

最新推荐文章于 2020-11-24 14:48:40 发布
最新推荐文章于 2020-11-24 14:48:40 发布
阅读量158 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108963201
版权

初学vue2

1.表单基本操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        form div {
            height: 40px;
            line-height: 40px;
        }
        
        form div:nth-child(4) {
            height: auto;
        }
        
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="http://www.baidu.com">
            <div>
                <span>姓名：</span>
                <span>
          <input type="text" v-model="uname">
        </span>
            </div>
            <div>
                <span>性别：</span>
                <span>
          <input type="radio" id="male" value="1" v-model="gender">
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model="gender">
          <label for="female">女</label>
        </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="1" v-model="hobbies">
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="2" v-model="hobbies">
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="3" v-model="hobbies">
                <label for="code">写代码</label>
            </div>
            <div>
                <span>职业：</span>
                <select multiple v-model="occupation">
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
            </div>
            <div>
                <span>个人简介：</span>
                <textarea v-model="desc"></textarea>
            </div>
            <div>
                <input type="submit" value="提交" v-on:click.prevent="handle">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
        //
        /*
            表单基本操作
        */
        var vm = new Vue({
            el: '#app',
            data: {
                uname: 'lisi',
                gender: 2,
                hobbies: ['1', '2', '3'],
                occupation: ['1', '2', '3'],
                desc: '你好'
            },
            methods: {
                handle() {}
            }
        });
    </script>
</body>

</html>

2.表单域修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" id="" v-model.number="age">
        <input type="text" id="" v-model.trim="info">
        <input type="text" id="" v-model.lazy="msg">
        <div>{{msg}}</div>
        <button @click="handle">点击</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                age: '',
                info: '',
                msg: ''
            },
            methods: {
                handle() {}
            }
        })
    </script>
</body>

</html>

3.自定义指令

全局自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-focus>
    </div>
    <script src="../vue.js"></script>
    <script>
        //
        /* 
           自定义指令
        */
        Vue.directive('focus', {
            inserted: function(el) {
                // el表示指令绑定的元素
                el.focus();
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-color="msg">
    </div>
    <script src="../vue.js"></script>
    <script>
        //
        /* 
           自定义指令
        */
        Vue.directive('color', {
            bind: function(el, binding) {
                //根据指令的参数设置背景色
                console.log(binding);
                console.log(binding.value.color);
                // el.value = binding.value
                el.style.backgroundColor = binding.value.color;
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    color: 'orange'
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>

局部自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-color="msg">
        <input type="text" v-focus>
    </div>
    <script src="../vue.js"></script>
    <script>
        //
        /* 
           自定义指令
        */
        var vm = new Vue({
            el: "#app",
            data: {
                msg: {
                    color: 'orange'
                }
            },
            methods: {

            },
            directives: {
                color: {
                    bind: function(el, binding) {
                        //根据指令的参数设置背景色
                        console.log(binding.value.color);
                        // el.value = binding.value
                        el.style.backgroundColor = binding.value.color
                    }
                },
                focus: {
                    inserted: function(el, binding) {
                        // console.log(1);
                        el.focus();
                    }
                }

            }
        })
    </script>
</body>

</html>

4、计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        //
        /* 
           自定义指令
        */
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '年后'
            },
            methods: {

            },
            directives: {

            },
            computed: {
                reverseString: function() {
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

5、监听器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>用户名:</span>
            <span>
                <input type="text" v-model.lazy="uname">
            </span>
            <span>{{tip}}</span>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        //
        /* 
        侦听器
        1.侦听器监听用户名的变化
        2.调用后台接口进行验证
        3.根据验证结果调整提示信息
         */
        var vm = new Vue({
                el: '#app',
                data: {
                    uname: '',
                    tip: ''
                },
                methods: {
                    checkName: function(uname) {
                        var that = this;
                        //调用接口  但是可以使用定时任务的方式模拟接口调用
                        setTimeout(function() {
                            //模拟接口调用
                            if (uname == "admin") {
                                that.tip = "用户已存在，请更换"
                            } else {
                                that.tip = "用户可以使用"
                            }
                        }, 2000)
                    }
                },
                watch: {
                    uname: function(val) {
                        //调用后台接口验证用户名的合法性
                        this.checkName(val);
                        //修改提示信息  
                        this.tip = "正在验证"
                    }
                }
            }

        )
    </script>
</body>

</html>

6、过滤器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{msg | upper}}</div>
        <div>{{msg | upper |lower}}</div>
        <div :abc="msg | upper">测试</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // Vue.filter('upper', function(val) {
        //     return val.charAt(0).toUpperCase() + val.slice(1);
        // })
        Vue.filter('lower', function(val) {
            return val.charAt(0).toLowerCase() + val.slice(1);
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: ""
            },
            filters: {
                upper: function(val) {
                    return val.charAt(0).toUpperCase() + val.slice(1);
                }
            }
        })
    </script>
</body>

</html>

7、生命周期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <button @click='update'>更新</button>
        <button @click='destroy'>销毁</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
              Vue实例的生命周期
              
            */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '生命周期'
            },
            methods: {
                update: function() {
                    this.msg = 'hello';
                },
                destroy: function() {
                    this.$destroy();
                }
            },
            beforeCreate: function() {
                console.log('beforeCreate');
            },
            created: function() {
                console.log('created');
            },
            beforeMount: function() {
                console.log('beforeMount');
            },
            mounted: function() {
                console.log('mounted');
            },
            beforeUpdate: function() {
                console.log('beforeUpdate');
            },
            updated: function() {
                console.log('updated');
            },
            beforeDestroy: function() {
                console.log('beforeDestroy');
            },
            destroyed: function() {
                console.log('destroyed');
            }
        });
    </script>
</body>

</html>

8、变异方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            <span>
                <input type="text" v-model="fname">
                <button @click='add'>添加</button>
                <button @click="delete1">删除</button>
                <button @click="change">替换</button>
            </span>
        </div>
        <ul>
            <li :key="index" v-for="(item,index) in list">{{item}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['apple', 'orange', 'banana']
            },
            methods: {
                add: function() {
                    this.list.push(this.fname)
                },
                delete1: function() {
                    this.list.pop(this.fname)
                },
                change() {
                    this.list = this.list.slice(0, 1);
                }
            },
        })
    </script>
</body>

</html>

9、动态响应式数据处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li :key="index" v-for="(item,index) in list">{{item}}</li>
        </ul>
        <div>
            <div>{{info.name}}</div>
            <div>{{info.age}}</div>
            <div>{{info.gender}}</div>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['apple', 'orange', 'banana'],
                info: {
                    name: 'list',
                    age: '12'
                }
            },
            methods: {

            },
        })
        vm.list[1] = 'lemon';
        Vue.set(vm.list, 2, 'lemon');
        vm.$set(vm.list, 1, 'lemon');

        // vm.info.gender = 'male'
        vm.$set(vm.info, 'gender', 'female')
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初学Vue
01-20
在script 中创建Vue的实例  el: ‘#app’, el 代表的是 vue 实例负责的区域范围 data 代表的是 数据块  接受function的是在methods中 1、原始写法    提交     {{item}}    var app = new Vue({  ...
vue-cli 2.9.3 详细入门教程
猫老板的豆
04-23 3217
https://github.com/Trojain/vue-cli-2.9.3 一、安装vue-cli 1.使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），命令如下： npm install vue-cli -g . 2.可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。如果vue -V的命令能显示版本号，说...
初学者vue3.0语法
最新发布
03-13
初学者vue3.0语法
vue.js+axios初学
11-15
axios初学vue.js+axios初学
初学Vue(学习笔记 一) day one
01-20
Vue概述 Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 Vue 的优点： 易用：熟悉HTML、CSS、 JavaScript知识后，可快熟上手 灵活：在一个库和一套完整框架之间自如伸缩 ...
vue3.0初学语法.md
08-04
vue3.0初学语法.md
better-scroll的使用
weixin_46500485的博客
11-18 1807
1.首先在页面中要有一个固定高度的容器 注：.wrapper就是这个容器 且这个容器只能有一个子容器 <div class="wrapper" ref="wrapper"> <ul class="moviebox"> <li v-for="(ele,index) in movieList" :key="index" class="movieContainer">
vue中tab栏的切换，保存状态，以及过渡
weixin_46500485的博客
11-10 1405
//当点击这个li的时候 将currentActive转换为hotting 然后在样式中比较 为true的话就可以显示样式 <ul class="hotAndComing"> <li @click="currentActive='Hotting'" :class="{'activeClass' : currentActive ==='Hotting'}">正在热映</li> <li @click="currentAc
Vue SSR的基本使用
weixin_46500485的博客
11-05 1005
1.安装 npm install vue vue-server-renderer --save 2.尝试在命令行中显示出来在服务器端渲染的元素 // 第 1 步：创建一个 Vue 实例 const Vue = require('vue') const app = new Vue({ template: `<div>Hello World</div>` }) // 第 2 步：创建一个 renderer const renderer = require('vue-server-
px2vw 单位转换插件
weixin_46500485的博客
11-24 728
在收藏里面
vue创建快速的path路径
weixin_46500485的博客
11-19 619
module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', } } } }
Vue换主题颜色和更换语言
weixin_46500485的博客
11-04 513
1.换主题颜色 在这个面板重新下载规定好颜色 按下载按钮 然后将下载得到的css文件跟原先引用的element-ui的css文件替换下 2.更换语言
Vue自定义插件
weixin_46500485的博客
11-04 240
1.第一步 首先创建一个plugin文件夹 把响应的代码放到其中对应的文件夹中 var MyPlugin = {} //第一个参数是vue 第二个参数就是引入这个包 Vue.use()的时候的第二个参数 MyPlugin.install = function (Vue, options) { console.log(options); // 1. 添加全局方法或 property //一般自定义插件都会在名字前面加上$符号 Vue.prototype.$dialog = function
封装一个简单的axios
weixin_46500485的博客
11-19 238
import axios from 'axios' // ES6 Promise的封装 export function request(options) { return new Promise((resolve, reject) => { // 1.创建axios的实例对象 const instance = axios.create({ // baseURL: 'http://152.136.185.210:8000/api/w6', baseURL:
Vuex的初使用
weixin_46500485的博客
11-04 235
1.state store的index.js文件 在store文件中定义了这些数据 然后要在组件文件中用计算属性取出这些数据 export default new Vuex.Store({ strict: true, state: { count: 0, title: 'hi store!', UserList: [] }, }) 组件文件 <template> <h1>{{titleAlias}}</h1> </templ
nuxtjs的初使用
weixin_46500485的博客
11-05 213
1.安装 $ npx create-nuxt-app <项目名> //或者 $ yarn create nuxt-app <项目名> 2.路由 只要在page目录下生成vue文件 nuxtjs就会自动将改组件添加到路由中去 ++ 在page文件中创建目录 接下来就可以直接用 http://localhost:3000/news 访问了 ++动态路由 动态路由只要在vue文件命名的时候加上下划线 例如 这样就可以直接访问了 ++路由嵌套 在目录下创建一个vue文件 同时在同
vue3.x的初使用
weixin_46500485的博客
11-06 212
1.vue3.x的新特性 1.Vue3.0六大亮点 Performance：性能比Vue 2.x快1.2~2倍 Tree shaking support：按需编译,体积比Vue2.x更小 Composition API: 组合API(类似React Hooks) Better TypeScript support：更好的 Ts 支持 Custom Renderer API：暴露了自定义渲染API Fragment, Teleport(Protal), Suspense：更先进的组件 2.vue是怎么变快
Vue的render函数
weixin_46500485的博客
11-05 191
其实render函数就跟template一样 是用来渲染模板的 1.两种方式使用render函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl
初学vue
weixin_46500485的博客
10-05 191
初学vue 1.cloak 解决页面闪动问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
初学vue案例练习题
08-23
初学Vue的案例练习题可以从以下几个方面进行练习： 1. 组件的基本使用：创建一个Vue组件，在模板中展示一些静态文本或数据，并在组件中定义一些基本的数据和方法。 2. 数据绑定：练习使用v-model指令和数据绑定来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值