[Web 前端] 032 vue 初识
0. 先下载
- 地址：https://cn.vuejs.org/v2/guide/installation.html
- 两个版本：
开发版本or生产版本 - 不妨先下载
开发版本，生产版本删去了报错信息
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 初识的更多相关文章
- EasyDSS RTMP流媒体服务器web前端：vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端：vue组件之间的传值，父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- [Web 前端] 033 Vue 的简单使用
目录 0. 方便起见,定个轮廓 1. v-model 举例 2. v-for 举例 3. v-if 举例 4. 事件绑定 举例 5. v-show 举例 0. 方便起见,定个轮廓 不妨记下方的程序为 ...
- [Web 前端] 021 js 初识 Javascript
1. Javascript 简介 1.1 定位 JS 是运行在浏览器端的脚本语言 1.1.1 关于浏览器 JS 由浏览器解释执行 JS 通常被直接嵌入 HTML 页面 1.1.2 关于脚本语言 JS ...
- React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- web前端框架之Vue hello world
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...
随机推荐
- Shiro（一）
1 权限管理 1.1 什么是权限管理? 基本上涉及到用户参与的系统都要进行权限管理,权限管理属于系统安全的范畴,权限管理实现对用户访问权限的控制,按照安全规则或者安全策略控制用户可以访问而且只能访问自 ...
- Linux系统中的硬件问题如何排查？(6)
Linux系统中的硬件问题如何排查?(6) 2013-03-27 10:32 核子可乐译 51CTO.com 字号:T | T 在Linux系统中,对于硬件故障问题的排查可能是计算机管理领域最棘手的工 ...
- Error: pgraster_wkb_reader: grayscale band type 10 unsupported
错误原因:Float32 is not supported for rendering.即栅格数据类型Float32不支持. cmd中用GDAL查看.在波段中的数据类型是Float32的不支持渲染. ...
- Git的使用及安装
1安装. 步骤一 如果是32位就安装32位,64位就安装64,任选一款. 步骤二 步骤三 步骤四 步骤五 步骤六 步骤七 步骤八 步骤九 步骤十 步骤十一 上面的安装完成以后,下面的程序包按要求安装就 ...
- mfc static控件 视频播放 闪屏问题 解决方案
方案1: 我昨天刚在csdn上解决了这个问题,不是双缓冲和WS_CLIPCHILDREN还有背景擦出什么的问题,就是在你重画的时候要去掉这些控件(按钮什么的)区域, 闪屏是因为窗口大小发生改变时,由于 ...
- python实现RGB转换HSV
def rgb2hsv(r, g, b): r, g, b = r/255.0, g/255.0, b/255.0 mx = max(r, g, b) mn = min(r, ...
- CodeChef-----February Challenge 2018---Broken Clock(极坐标+三角函数递推+矩阵快速幂)
链接: https://www.codechef.com/FEB18/problems/BROCLK Broken Clock Problem Code: BROCLK Chef has a clo ...
- [CSP-S模拟测试]:优化（贪心+DP）
题目描述 $visit\text{_}world$发现有下优化问题可以用很平凡的技巧解决,所以他给你分享了这样一道题:现在有长度为$N$的整数序列$\{ a_i\}$,你需要从中选出$K$个不想叫的连 ...
- intellij idea中去除@Autowired注入对象的红色波浪线提示
idea中通过@Autowired注入的对象一直有下划线提示. 解决:改变@Autowired的检查级别即可. 快捷键:Ctrl+Alt+s,进入idea设置界面,输入inspections检索
- shell命令别名
~/.bashrc文件 [root@linuxzgf ~]# vi ~/.bashrc 在alias cp='cp -i'前加上"#"注释,重新登录即可实现复 ...