0. 先下载

1. 先写个轮廓

  • 不妨将下方轮廓记为 code1
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>code1</title>

    <!-- 记得导入下载的 vue.js -->

    <script type="text/javascript" src="./vue.js"></script>

    <!-- * -->

</head>

<body>

    <!-- 1 -->

    <script type="text/javascript">

        <!-- 2 -->

    </script>

</body>

</html>

2. 牛刀小试

2.1 例子 1

  • step1
<!-- 在 code1 的 1 处创建容器 -->

<div id="app1">

    {{msg}}

</div>
  • step2
// 在 code1 的 2 处创建 Vue 实例

new Vue({

    el: "#app1",	// el 是挂载点，用来挂载元素

    data: {			// 模板

        msg: "你好"

    }

});
  • 几个概念

    • 挂载点：Vue 只处理挂载点的内容
    • 模板：挂载点里面的内容
    • 实例：
      • new Vue()
      • 自动结合模板和数据，生成内容，将生成的内容发到挂载点

2.2 例子 2

  • step1
<!-- 在 code1 的 1 处，紧跟在 id="app1" 下面 -->

<div id="app2">

    {{msg}}

</div>
  • step2
// 在 code1 的 2 处，紧跟着上一个 Vue 实例

var vm = new Vue({

    el: "#app2",

    data: {

        msg: "数据"

    }

});
  • 可以在控制台这样输入
> vm.msg = "姓名";
  • 控制台会返回
<· "姓名"
  • 与此同时，页面的第二行，原来的“数据”变为了“姓名”

    • 双向绑定：模板与视图中的数据会互相影响

3. 模板语法

  • 首先，取一个新的 code1（即，清空 code1 的 1 处与 2 处）

上例子

  • step1
<!-- 在 code1 的 1 处加入如下代码 -->

<div id="app">

    <p>{{msg}}</p>

    <p>{{str}}</p>

    <p>{{obj}}</p>

    <p>{{arr}}</p>

    <p>{{1+1}}</p>

    <p>{{1>0?'Y':'N'}}</p>

    <!--

    <p>{{var n = 1;}}</p>

    [Vue warn]: Error compiling template: ...

    -->

</div>
  • step2
// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        msg: 12,

        str: "34",

        obj: {

            name: "zhangsan",

            age: 18

        },

        arr: [5, 6, 'a', 'b']

    }

});
  • 上例说明

    • 模板中可以写的数据类型：字符串、对象、数组、简单运算
    • 不能写：表达式

4. 文本指令

  • 首先，取一个新的 code1

上例子

  • step1
<!-- 在 code1 的 1 处加入如下代码 -->

<div id="app">

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

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

</div>
  • step2
// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        msg: "<h1>你好</h1>"

    }

});
  • v-html 可以解析标签
  • v-text 不能解析标签

5. 属性操作

  • 首先，取一个新的 code1

上例子

  • step1
<!-- 在 code1 的 1 处加入如下代码

vue 1 版本可以这么用，但 2 版本改了

<a href={{url}}>百度</a> -->

<!-- 完整写法 v-bind:href="url" -->

<a v-bind:href="url1">百度</a> <br>

<!-- 简写（推荐） :href="url" -->

<a :href="url2" :title="msg">博客园</a>
  • step2
// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        url1: "https://www.baidu.com",

        url2: "https://www.cnblogs.com",

        msg: "点我去博客园"

    }

});
  • v-bind:属性名=""
  • 简写 :属性名=""

6. 样式操作

  • 首先，取一个新的 code1

上例子

  • step1
<!-- 在 code1 的 * 处加入 style -->

<style type="text/css">

    .box1{

        width: 200px;

        height: 200px;

        background: red;

    }

    .box2{

        border: 3px solid green;

    }

</style>
  • step2
<div id="app">

    <div :class="[item1,item2]">1</div>

    <div :class="{box1:true,box2:false}">2</div>

    <div :class="{box1:flag,box2:flag}">3</div>

    <!-- 会报错

	<div v-bind:style="width:200px">4</div> -->

    <div v-bind:style="{width:'200px',height:'200px',background:'red'}">4</div>

    <div v-bind:style="{width:W,height:H,background:bg}">5</div>

    <div v-bind:style="json">6</div>

    <div v-bind:style="[json,b]">7</div>

</div>
  • step3
// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        item1: "box1",

        item2: "box2",

        flag: true,

        W: "200PX",

        H: "200PX",

        bg: "red",

        json: {

            width: "200px",

            height: "200px",

            background: "red"

        },

        b: {

            border: "3px solid green"

        }

    }

});

类名的操作

  • 数组语法
v-bind:class=[变量名, 变量名]

data: {

	变量名: 类名

}
  • 对象语法
v-bind:class={类名:true/false}

style 的操作

  • 数组语法
:style=[obj1, obj2]

data: {

	obj1: {

		width: '200px',

		background: 'red'

	},

	obj2: {

		border: '1px solid green'

	}

}
  • 对象语法
:style={width:w}

data: {

	w:'200px'

}

[Web 前端] 032 vue 初识的更多相关文章

  1. EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  3. [Web 前端] 033 Vue 的简单使用

    目录 0. 方便起见,定个轮廓 1. v-model 举例 2. v-for 举例 3. v-if 举例 4. 事件绑定 举例 5. v-show 举例 0. 方便起见,定个轮廓 不妨记下方的程序为 ...

  4. [Web 前端] 021 js 初识 Javascript

    1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...

  5. React 还是 Vue: 你应该选择哪一个Web前端框架？

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  6. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  7. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  8. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  9. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

随机推荐

  1. 浅谈redis分布式锁用法

    使用redis的setnx命令进行实现 @Component @Slf4j public class RedisLock { @Autowired private StringRedisTemplat ...

  2. thinkphp5杂谈--项目架构和模板搭建(view视角)

    nginx网站配置 项目架构 项目文件夹 视图模板 一种出幺蛾子的访问办法 访问相关特色模块并渲染视图

  3. thinkphp读取器和修改器

    读取器 如果在模型中,自定义了方法,那么读取器会读取模型中自定义的方法,否则会调用默认的方法. 写入器

  4. MYSQL<一>

    -- ########## 01.数据库概述 ########## -- 1.信息:现实世界中各种可以接触到的东西 -- 2.数据:信息在计算机世界中的映射(反映) -- Java中可以把数据存储在内 ...

  5. uwsgi 的启动、停止、重启

    ## 一.概念释义### WSGI WSGI 是一个Web服务器(如nginx)与应用服务器(如uWSGI)通信的一种规范(协议).官方定义是,the Python Web Server Gatewa ...

  6. 文本框——EditText

    长度

  7. 联系人：ContactsContract类

    Android系统管理联系人的URI如下: ContactsContract.Contacts.CONTENT_URI                                     管理联系 ...

  8. android 文件保存到应用和sd卡中

    <span style="font-size:18px;">1.权限添加 <uses-permission android:name="android. ...

  9. Thymeleaf 1-入门与基本概述

    一.概述 1.是什么 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP . 2.feature 1.Thymeleaf 在有网络和 ...

  10. php数组合并用加号(+)和用array_merge()的区别

    结论:用加号合并数组:既考虑数字索引的键值对,也考虑字符串索引的键值对,用前边数组的值覆盖后边的键名相同的值; 用array_merge()合并数组:只考虑字符串索引的键值对,用后边数组的值覆盖掉前面 ...