0. 先下载

1. 先写个轮廓

  • 不妨将下方轮廓记为 code1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>code1</title>
  6.     <!-- 记得导入下载的 vue.js -->
  7.     <script type="text/javascript" src="./vue.js"></script>
  8.     <!-- * -->
  9. </head>
  10. <body>
  11.     <!-- 1 -->
  12.     <script type="text/javascript">
  13.         <!-- 2 -->
  14.     </script>
  15. </body>
  16. </html>

2. 牛刀小试

2.1 例子 1

  • step1
  1. <!-- 在 code1 的 1 处创建容器 -->
  2. <div id="app1">
  3.     {{msg}}
  4. </div>
  • step2
  1. // 在 code1 的 2 处创建 Vue 实例
  2. new Vue({
  3.     el: "#app1",	// el 是挂载点，用来挂载元素
  4.     data: {			// 模板
  5.         msg: "你好"
  6.     }
  7. });
  • 几个概念

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

2.2 例子 2

  • step1
  1. <!-- 在 code1 的 1 处，紧跟在 id="app1" 下面 -->
  2. <div id="app2">
  3.     {{msg}}
  4. </div>
  • step2
  1. // 在 code1 的 2 处，紧跟着上一个 Vue 实例
  2. var vm = new Vue({
  3.     el: "#app2",
  4.     data: {
  5.         msg: "数据"
  6.     }
  7. });
  • 可以在控制台这样输入
  1. > vm.msg = "姓名";
  • 控制台会返回
  1. <· "姓名"
  • 与此同时，页面的第二行，原来的“数据”变为了“姓名”

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

3. 模板语法

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

上例子

  • step1
  1. <!-- 在 code1 的 1 处加入如下代码 -->
  2. <div id="app">
  3.     <p>{{msg}}</p>
  4.     <p>{{str}}</p>
  5.     <p>{{obj}}</p>
  6.     <p>{{arr}}</p>
  7.     <p>{{1+1}}</p>
  8.     <p>{{1>0?'Y':'N'}}</p>
  9.     <!--
  10.     <p>{{var n = 1;}}</p>
  11.     [Vue warn]: Error compiling template: ...
  12.     -->
  13. </div>
  • step2
  1. // 在 code1 的 2 处加入如下代码
  2. new Vue({
  3.     el: "#app",
  4.     data: {
  5.         msg: 12,
  6.         str: "34",
  7.         obj: {
  8.             name: "zhangsan",
  9.             age: 18
  10.         },
  11.         arr: [5, 6, 'a', 'b']
  12.     }
  13. });
  • 上例说明

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

4. 文本指令

  • 首先，取一个新的 code1

上例子

  • step1
  1. <!-- 在 code1 的 1 处加入如下代码 -->
  2. <div id="app">
  3.     <p v-html="msg"></p>
  4.     <p v-text="msg"></p>
  5. </div>
  • step2
  1. // 在 code1 的 2 处加入如下代码
  2. new Vue({
  3.     el: "#app",
  4.     data: {
  5.         msg: "<h1>你好</h1>"
  6.     }
  7. });
  • v-html 可以解析标签
  • v-text 不能解析标签

5. 属性操作

  • 首先，取一个新的 code1

上例子

  • step1
  1. <!-- 在 code1 的 1 处加入如下代码
  3. vue 1 版本可以这么用，但 2 版本改了
  4. <a href={{url}}>百度</a> -->
  6. <!-- 完整写法 v-bind:href="url" -->
  7. <a v-bind:href="url1">百度</a> <br>
  9. <!-- 简写（推荐） :href="url" -->
  10. <a :href="url2" :title="msg">博客园</a>
  • step2
  1. // 在 code1 的 2 处加入如下代码
  2. new Vue({
  3.     el: "#app",
  4.     data: {
  5.         url1: "https://www.baidu.com",
  6.         url2: "https://www.cnblogs.com",
  7.         msg: "点我去博客园"
  8.     }
  9. });
  • v-bind:属性名=""
  • 简写 :属性名=""

6. 样式操作

  • 首先，取一个新的 code1

上例子

  • step1
  1. <!-- 在 code1 的 * 处加入 style -->
  2. <style type="text/css">
  3.     .box1{
  4.         width: 200px;
  5.         height: 200px;
  6.         background: red;
  7.     }
  8.     .box2{
  9.         border: 3px solid green;
  10.     }
  11. </style>
  • step2
  1. <div id="app">
  2.     <div :class="[item1,item2]">1</div>
  3.     <div :class="{box1:true,box2:false}">2</div>
  4.     <div :class="{box1:flag,box2:flag}">3</div>
  5.     <!-- 会报错
  6. 	<div v-bind:style="width:200px">4</div> -->
  7.     <div v-bind:style="{width:'200px',height:'200px',background:'red'}">4</div>
  8.     <div v-bind:style="{width:W,height:H,background:bg}">5</div>
  9.     <div v-bind:style="json">6</div>
  10.     <div v-bind:style="[json,b]">7</div>
  11. </div>
  • step3
  1. // 在 code1 的 2 处加入如下代码
  2. new Vue({
  3.     el: "#app",
  4.     data: {
  5.         item1: "box1",
  6.         item2: "box2",
  7.         flag: true,
  8.         W: "200PX",
  9.         H: "200PX",
  10.         bg: "red",
  11.         json: {
  12.             width: "200px",
  13.             height: "200px",
  14.             background: "red"
  15.         },
  16.         b: {
  17.             border: "3px solid green"
  18.         }
  19.     }
  20. });

类名的操作

  • 数组语法
  1. v-bind:class=[变量名, 变量名]
  2. data: {
  3. 	变量名: 类名
  4. }
  • 对象语法
  1. v-bind:class={类名:true/false}

style 的操作

  • 数组语法
  1. :style=[obj1, obj2]
  2. data: {
  3. 	obj1: {
  4. 		width: '200px',
  5. 		background: 'red'
  6. 	},
  7. 	obj2: {
  8. 		border: '1px solid green'
  9. 	}
  10. }
  • 对象语法
  1. :style={width:w}
  2. data: {
  3. 	w:'200px'
  4. }

[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. python 后台 安装 富文本编辑

    前言 当然需要安装一些后台只能输入一些文本编辑器,不然这样多少不美观呀 当然python 有 safe 可以把后台的标签转换 , 还有 striptags   这个是换成html 格式的,但不会加粗或 ...

  2. Hystrix——让你的服务更稳一点

    摘要: 1.为什么要用Hystrix在分布式服务环境下,服务之间的调用关系变得错综复杂,你是否担心依赖的服务延迟导致自己的服务也被拖跨呢?是否在苦苦思考如何优雅的对依赖服务进行异步调用呢?是否希望当流 ...

  3. tf.stack( )和tf.unstack( )

    相同点:他们都增加了矩阵的维度,而split()不改变维度! tf.stack()这是一个矩阵拼接的函数,tf.unstack()则是一个矩阵分解的函数 c是拼接,而d和e则是不同维度的分解

  4. JS数据容量单位转换(kb,mb,gb,tb)

    JS代码如下: var size = '8164674'; function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1 ...

  5. swiper实现滑动到某页锁住不让滑动

    var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', onTouchStart: funct ...

  6. （四）mysql -- 常用函数

    今天get一个,先记录一下 以后慢慢补充~ 将varchar转换成int 例如:select * from tb_1 order by cast(sport_sum as unsigned integ ...

  7. [BZOJ1059]:[ZJOI2007]矩阵游戏（二分图匹配）

    题目传送门 题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N×N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种 ...

  8. 白鹭http请求post

    示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...

  9. REST framework 之 分页

    DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...

  10. mybatis 注解方式插入，主键由uuid函数生成

    @SelectKey(keyProperty = "record.id", resultType = String.class, before = true, statement ...