一、什么是vue

二、如何在页面中使用vue

三、vue的挂载点

四、vue的基础指令

一、什么是vue

　　1.什么是vue

　　　　vue.js十一个渐进式javascript框架

　　　　渐进式：vue从控制页面中的一个变量到页面中一块内容到整个页面，最终到整个项目都可以用vue框架来实现

　　2.vue可以做哪些事情

　　　　将数据渲染到指定区域（数据可以是后台获取，也可以死是前台自己产生）

　　　　可以与页面完成基于数据的交互方式

　　3.为什么学习vue

　　　　1.整合了Angu lar 、React框架的有点（第一手API文档是中文的）

　　　　2.单页面应用（得益于vue组织化的开发 => 前台代码的复用）

　　　　3.虚拟DOM（提高DOM操作的效应）

　　　　4.数据的双向绑定

二、如何在页面中使用vue

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="box1">

        <!--{{}}会被vue解析为数据的渲染的指定语法-->

        {{ }}

    </div>

    <hr>

    <div class="box2">

        {{ }}

    </div>

</body>

<!--引入vue：将vue加载到js文件下-->

<script src="js/vue.js"></script>

<script>

    //如何使用jq框架<=拿到jq框架的对象 $|jQuery

    //类比：如何使用vue框架<=拿到vue框架的对象那个 new Vue（）

    // vue对象需要手动创建，原因，一个vue对象可以只控制页面中的某一部分，如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象

    // vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂摘点（挂载点可以是唯一标识页面中的某一区域）

    new Vue({

        el:'#box1'

        // 挂在id为box1的div上，那么div下的所有内容都由该vue对象来控制

    })

    new Vue({

        el:'.box2'

        //挂在class为box2的div上，那么div下的所有内容都有该vue对象来控制(尽量使用id，唯一标识)

    })

</script>

</html>

三、vue的挂载点

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

    {{ msg }}

    </div>

</body>

<script src='js/vue.js'> </script>

<script>

    //vue实例会根据数据产生虚拟DOM，最终替换掉挂载点的真是DOM（不要挂载到body上）

    var app = new Vue({

        el:'#app',

        data:{

            msg:'今晚约了女神开房间打斗地主，女神如时赴约，到房间后看我从包里取出一副扑克后，被删了一耳光走了，留下我一人独自风中凌乱！'

    }

    });

    //如果需要使用vue对象（实例），那么久可以接受vue创建的结果，反而就不需要接受

    console.log(app);

    console.log(app.$attrs);// vue实例的变量都是以$开头

    console.log(app.$el);

    console.log(app.$data.msg);

    console.log(app.msg);

    // app对象 = new Vue（）实例 = 标签div#app组件

</script>

</html>

四、vue的基础指令

1.文本指令

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <p>{{ info }}</p>

        <!--v-text 为vue的文本指令 = "info",info为vue实例data中的一个变量-->

        <p v-text="info"></p>

        <p v-text="msg"></p>

        <p v-html="res"></p>

    </div>

</body>

<script src='js/vue.js'> </script>

<script>

    new Vue({

        el:'#app',

        data:{

            info:"插值表达式",

            msg:"文本指令",

            res:"<b>加粗的字体</b>",

    }

    });

</script>

</html>

2.属性指令

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <!--v-bind:属性 = "变量"-->

    <!--如果abc自定义属性被v-bind：指令绑定了，后面的值也会成为vue变量，如果就像是普通的字符串，再用“包裹”-->

    <!--:就是v-bind：简写方式（1.常用 2.一定且只操作属性）-->

    <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>

    <!--最常用的两个属性 class|style-->

    <!--class-->

    <p :class="a"></p> <!--单类名-->

    <p :class="[a,b]"></p> <!--双类名-->

    <p :class="{c:d}"></p> <!--了解：c为类名，是否起作用取决于d值为true|false 开关类名-->

    <!--style-->

    <p :style="s1"></p> <!--s1为一套样式-->

    <p :style="[s1,s2,{textAlign:res}]">123</p> <!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") -->

</div>

</body>

<script src='js/vue.js'></script>

<script>

    new Vue({

        el: '#app',

        data: {

            h_info: "悬浮提示",

            hehe: "呵呵",

            a: 'active',

            b: 'rule',

            s1: {//样式1：值1，...,样式n：值n

                width: '200px',

                height: '200px',

                background: 'yellow',

            },

            s2: {

                borderRadius: '50%'

            },

            res: 'center'

        }

    });

</script>

</html>

3.事件指令

<!DOCTYPE html>

<html >

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="app">

        <!--v-on:事件="变量 简写@"-->

        <!--事件绑定的变量可以在data中赋值，但建议在methods中赋值-->

        <p v-on:click="fn1">111</p>

        <p @click="fn2">222</p>

        <!--vue事件绑定可以传自定义参数-->

        <p @click="fn3(33333)">333</p>

        <!--vue事件绑定不传自定义参数，默认将事件对象传过去了-->

        <p @click="fn4">444</p>

        <!--vue事件绑定不传自定义参数，还要将事件对象传过去，要明确传$event-->

        <p @click="fn1(55555,$event)">555</p>

    </div>

</body>

<script src='js/vue.js'> </script>

<script>

    new Vue({

        el:'#app',

        data:{

            //事件在data中提供一个函数地址，可以实现事件

            fn1:function () {

                console.log('1111')

            }

    },

        // 以后事件尽量写在methods中

        methods:{

            fn2:function () {

                console.log('2222')

            },

            fn3(arg) {

                console.log('arg')

            },

            fn4:function (ev) {

                console.log(ev)

            },

            fn5:function (arg,ev) {

                console.log('arg')

                console.log('ev')

            },

        }

    });

</script>

</html>

4.表单指令

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <form action="">

        <!--v-model="变量"本质操作的就是表单元素的value-->

        <!--v-model完成的就是双向绑定-->

        <input type="text" v-model="value">

        <input type="text" v-model="value">

        <p>{{ value }}</p>

        <!--v-once只会被赋值一次，并且结合双向绑定-->

        <p v-once="value">{{ value }}</p>

    </form>

</div>

</body>

<script src='js/vue.js'></script>

<script>

    new Vue({

        el: '#app',

        data: {

            value: '初始的value',

            // value:"",

        }

    });

</script>

</html>

Vue介绍：vue导读1的更多相关文章

  1. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  2. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. Vue学习笔记之Vue介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

  5. vue——介绍和使用

    一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...

  6. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  7. Vue小白篇 - Vue介绍

    Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...

  8. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  9. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

随机推荐

  1. 4.git的基本命令

    版本库 index 暂存区,HEAD 将来1.0,2.0的指向  多次add,一次commit 每次commit一次,head就指向了最新的版本.head是回退版本的时候会用到 一般有开发的分支,ma ...

  2. 【ARM-Linux开发】 pkg-config的用法

    pkg-config 是一个提供从源代码中编译软件时查询已安装的库时使用的统一接口的计算机软件.pkg-config原本是设计用于Linux的,但现在在各个版本的BSD.windows.Mac OS ...

  3. LIBS+=（20191017）

    1.方式一:(ZC:"LIBPATH"中写路径,"LIBS"中写lib文件名[不带后缀]) LIBPATH += F:/ZC_IDE/VC_3rd/libxml ...

  4. vscode插件Project Manager

    参考链接:https://www.jianshu.com/p/b11532b91414

  5. CentOS7 卸载mysql（YUM源方式）

    防止重装 yum方式 查看yum是否安装过mysql yum list installed mysql* 如或显示了列表,说明系统中有MySQL  yum卸载 根据列表上的名字 yum remove ...

  6. Kubernetes---Pod phase

    ⒈Pod phase Pod的status字段是一个PodStatus对象,PodStatus中有一个 phase字段. Pod的相位(phase)是Pod 在其生命周期中的简单宏观概述.该阶段并不是 ...

  7. （六）Spring 中的 JdbcTemplate

    目录 概念 配置数据库 创建 JdbcTemplate 对象 增删改查代码 概念 JdbcTemplate : 是 Spring 中对持久层(JDBC 技术)一个封装 : 使用起来和 Dbutuis ...

  8. vs code 更改快捷键

    选择左下角设置图标,快捷键方式 文件列表修改,搜 list 文件tree list.focusUp -> ctrl+p

  9. Python 【格式化字符串】

    print('血量:'+str(player_life)+' 攻击:'+str(player_attack)) 第一种格式化字符串 print('血量:%s 攻击:%s' % (player_life ...

  10. 适合新手的160个creakme（三）

    先跑一下,这个程序应该是有定时器,多久之后自动开启,测试一下输入,序列号以字母方式输入会出现类型不匹配,之后程序自动退出 但是如果以数字方式输入序列号,则会出现,Try Again,所以这里序列号应该 ...