精华内容
参与话题
问答
  • Vue 初学

    2019-05-29 14:28:00
    在开始之前需要下载node.js,详见搭建Vue开发环境篇。 1.创建文件夹Vue,并创建如下结构: 2.在Vue官网下载开发(vue.js)和生产(vue.minjs)两个版本,并将这两个文件放入到Vue--assets--js中 3.安装一个开发用的...

    在开始之前需要下载node.js,详见搭建Vue开发环境篇。

    1.创建文件夹Vue,并创建如下结构:

    2.在Vue官网下载开发(vue.js)和生产(vue.minjs)两个版本,并将这两个文件放入到Vue--assets--js中

    3.安装一个开发用的服务,cnpm install -g live-server

       运用live-server命令即可运行项目

    4.初始化项目npm init,成功后在Vue文件中会出现package.json文件

    5.在example文件夹中创建helloworld.html文件,内容如下:

    <!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-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            {{message}}
        </div>
    
        <script type="text/javascript">
            var App = new Vue({
                el: "#app",
                data: {
                    message: 'hello world'
                }
            })
        </script>
    </body>
    
    </html>

    至此,一个vue应用已经完成~

    展开全文
  • Vue初学

    2019-10-10 19:25:06
    基本指令 ...改变任一方数据后都会实时更新。 语法格式1:单个语法格式 v-bind:attributeName=variable 语法格式2:对象语法格式 v-bind=“{attributeName1:variable1,attributeName2:variable2,……}” ...

    基本指令

    v-bind动态属性:常用于动态绑定HTML元素的属性,例如id、class、href、src等属性。改变任一方数据后都会实时更新。

    语法格式1:单个语法格式

    v-bind:attributeName=variable

    在这里插入图片描述

    语法格式2:对象语法格式

    v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”

    在这里插入图片描述

    语法格式3:数组语法格式”绑定类名”

    v-bind:attributeName=“[variable1,variable2,……]”

    在这里插入图片描述

    v-if指令主要职责就是当表达式值改动时,相应的将某些行为应用到DOM上,以v-if为例

    v-if指条件性渲染,为true时渲染DOM,否则不进行渲染:

    在这里插入图片描述

    v-show也是指条件性渲染,用法与v-if类似:不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

    在这里插入图片描述

    v-on: @方法名 v-on用于绑定事件监听器,实现一些交互功能

    在这里插入图片描述

    v-on表达式 语法:v-on:事件类型=”内联语句”表达式除了方法名,也可以是内联语句在这里插入图片描述

    v-on修饰符 以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

    ①.stop:阻止事件的传递,即阻止事件向上冒泡。

    在这里插入图片描述

    ②.prevent:阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。在这里插入图片描述#### .capture:使用事件捕获机制在这里插入图片描述#### .self:当事件在该元素自身触发时执行相应的事件处理程序,在该元素的子元素上不触发。

    在这里插入图片描述

    v-on修饰符 .once:绑定的事件只能触发一次。

    在这里插入图片描述

    keyup.keyCode键值修饰符,用来监听键盘事件。可以通过按键名称来监听,也可以自定义按键名称(键盘修饰符及自定义键盘修饰符)在这里插入图片描述#### methods选项-代理方法 Vue.js将methods里的方法也代理了, 所以可以像访问Vue数据一样来调用方法。

    在这里插入图片描述

    console简介 控制台(Console)是JS开发里最重要的面板,主要作用是显示网页加载过程中产生各类信息。

    显示信息的命令 console对象,提供5种方法,用来显示信息日志信息console.log()、一般信息console.info()除错信息console.debug()、警告提示console.warn()错误提示console.error()

    在这里插入图片描述

    占位符 console对象的上面5种方法,都可以使用printf(格式化输出)风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)、CSS格式化样式(%c)五种。

    console.log("%s年",11.36)

        console.log("%d年%d月%d日",2019,10,10)
       console.log("%d+%d=%d",1,2,3,)  //占位符-格式化输出
      console.log("圆周率是%f",3.14159)
     var dog = {};
     dog.name = "11";
     dog.color = "黄色";
     console.log("%o",dog)
     console.log("%c这是一段神奇的文字","color:red;font-size:40px;text-shadow:10px 10px 10px #ccc")
     ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191010195255335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTcyOTA1MQ==,size_16,color_FFFFFF,t_70)
    

    分组显示 如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()。

    在这里插入图片描述

    输出属性与方法 console.dir()可以显示一个对象所有的属性和方法。

    在这里插入图片描述

    输出节点代码 console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

    在这里插入图片描述

    清空控制台 console.clear()清空控制台内容

    在这里插入图片描述

    表格化 console.table()方法可以将传入的对象或数组这些复合数据以表格形式输出。在这里插入图片描述

    在这里插入图片描述

    展开全文
  • vue初学

    2018-04-11 18:40:54
    v-bind:+属性名,例如:v-bind:class = "{'class1':flag}"或::class = "{'class1':flag}" 是v-bind的简写v-bind用于绑定属性---------------------------------v-on:+事件名,例如:v-on:click = ...

    v-bind:+属性名,

    例如:

    v-bind:class = "{'class1':flag}"

    或:

    :class = "{'class1':flag}"   是v-bind的简写

    v-bind用于绑定属性

    ---------------------------------

    v-on:+事件名,

    例如:

    v-on:click = "fun1"

    或:

    @click = "fun1"  是v-on的简写

    v-on用于绑定事件

    ----------------------------------

    vue中的方法可以作为Vue对象的属性存在,也可以作为Vue对象的属性的属性存在,都可以被事件绑定。

    但为了规范,一般我们都将方法作为methods的属性。

    展开全文
  • VUE初学者必看PPT

    2020-09-28 20:47:47
    VUE初学者必看PPT的课程资源,深入浅出,很有意义,MVVM模式,从Vue到页面。物超所值,大家快来下载!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!...
  • Vue初学4 vue路由

    2020-10-25 16:27:10
    1.vue-router的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...

    1.vue-router的基本使用

    <!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">
            <router-link to="/user">User</router-link>
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </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">
            <router-link to="/">重定向</router-link>
            <router-link to="/user">User</router-link>
            <router-link to="/Register">Register</router-link>
    
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: '<h1>User</h1>'
            }
            const Register = {
                template: '<h1>Register</h1>'
            }
            const router = new VueRouter({
                routes: [{
                    path: '/user',
                    // redirect: '/Register'
                    component: User
                }, {
                    path: '/',
                    redirect: '/Register'
                        // component: User
                }, {
                    path: '/Register',
                    component: Register
                }]
            })
            const vm = new Vue({
                el: '#app',
                data: {},
                router,
            })
        </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">
            <router-link to='/User'>user组件</router-link>
            <router-link to='/Register'>Register组件</router-link>
    
            <div>
                <router-view></router-view>
            </div>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: '<h1>User</h1>'
            }
            const Register = {
                template: `<div>
                    <h1>Register组件</h1>
                    <hr/>
                    <!-- 子路由链接 -->
                    <router-link to="/register/tab1">tab1</router-link>
                    <router-link to="/register/tab2">tab2</router-link>
                    <router-view></router-view>
                    <div>`
            }
            const Tab1 = {
                template: "<h3>tab1 子组件</h3>"
            }
            const Tab2 = {
                template: "<h3>tab2 子组件</h3>"
            }
            const router = new VueRouter({
                routes: [{
                    path: '/User',
                    component: User
                }, {
                    path: '/Register',
                    component: Register,
                    children: [{
                        path: '/register/tab1',
                        component: Tab1
                    }, {
                        path: '/register/tab2',
                        component: Tab2
                    }]
                }]
            })
            const vm = new Vue({
                el: '#app',
                data: {},
                router
            })
        </script>
    </body>
    
    </html>
    

    4.动态路由匹配1

    <!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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link to="/user/3">User3</router-link>
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            const UserNum = {
                    template: "<h1>User {{$route.params.id}}</h1>"
                }
                //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    path: '/user/:id',
                    component: UserNum,
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </script>
    </body>
    
    </html>
    

    5.动态路由匹配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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link to="/user/3">User3</router-link>
    
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            const UserNum = {
                    props: ['id'],
                    template: "<h1>User {{id}}</h1>"
                }
                //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    path: '/user/:id',
                    component: UserNum,
                    props: true
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </script>
    </body>
    
    </html>
    

    6.动态匹配路由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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link to="/user/3">User3</router-link>
    
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            const UserNum = {
                props: ['id', 'username', 'age'],
                template: "<h1>User 姓名为:{{username}} 年龄为:{{age}}</h1>"
            };
            //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    path: '/user/:id',
                    component: UserNum,
                    props: {
                        username: 'lisi',
                        age: 20
                    }
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </script>
    </body>
    
    </html>
    

    7.动态路由匹配

    <!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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link to="/user/3">User3</router-link>
    
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            const UserNum = {
                    props: ['id', 'username', 'age'],
                    template: "<h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>"
                }
                //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    path: '/user/:id',
                    component: UserNum,
                    props: route => ({
                        username: 'zx',
                        age: 20,
                        id: route.params.id
                    })
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link :to="{name:'user',params:{id:123}}">User3</router-link>
    
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: "<h1>Register组件</h1>"
            };
            const UserNum = {
                    props: ['id', 'username', 'age'],
                    template: "<h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>"
                }
                //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    name: 'user',
                    path: '/user/:id',
                    component: UserNum,
                    props: route => ({
                        username: 'zx',
                        age: 20,
                        id: route.params.id
                    })
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </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">
            <router-link to="/user/1">User1</router-link>
            <router-link to="/user/2">User2</router-link>
            <router-link :to="{name:'user',params:{id:123}}">User3</router-link>
    
            <router-link to="/register">Register</router-link>
    
            <!-- 路由占位符 -->
            <router-view></router-view>
        </div>
        <script src="../vue.js"></script>
        <script src="../vue-router_3.0.2.js"></script>
        <script>
            const User = {
                template: "<h1>User组件</h1>"
            }
            const Register = {
                template: `<div>
                    <h1>Register组件</h1>
                    <button @click="goback">后退</button>
                    </div>`,
                methods: {
                    goback() {
                        this.$router.go(-1)
                    }
                },
            };
            const UserNum = {
                    props: ['id', 'username', 'age'],
                    template: `<div>
                        <h1>User 用户id为{{id}}  姓名为:{{username}}  年龄为:{{age}}</h1>
                        <button @click="goRegister">跳转到注册页面</button>
                        </div>`,
                    methods: {
                        goRegister() {
                            this.$router.push('/register')
                        }
                    },
                }
                //创建路由实例对象
            const router = new VueRouter({
                //所有的路由规则
                routes: [{
                    name: 'user',
                    path: '/user/:id',
                    component: UserNum,
                    props: route => ({
                        username: 'zx',
                        age: 20,
                        id: route.params.id
                    })
                }, {
                    path: '/user',
                    component: User
                }, {
                    path: '/register',
                    component: Register
                }]
            });
            //创建vm实例对象
            const vm = new Vue({
                //指定控制区域
                el: '#app',
                //挂载路由实例对象
    
                data: {
    
                },
                router,
            });
        </script>
    </body>
    
    </html>
    
    展开全文
  • Vue初学总结 vue入门

    2020-08-05 17:25:28
    Vue初学总结常用指令大胡子表达式{{}}v-for(循环指令)v-show、v-if (判断是否显示)v-modelv-bindv-model 常用指令 大胡子表达式{{}} 下面展示一些 大胡子表达式的用法。 可以用来直接取data里的值、用来对值进行...

空空如也

1 2 3 4 5 ... 20
收藏数 2,446
精华内容 978
关键字:

vue初学

vue 订阅