C4前端云原生学习笔记

文章目录

C4前端云原生学习笔记
- 一、vue知识点
- - 1、vue简介
  - 2、开发工具
  - 3、初识vue

一、vue知识点

1、vue简介

官网：cn.vuejs.org
渐进式框架：哪个开发阶段都能满足需求
vue全家桶：生态系统（vue router、vuex、vue服务器渲染）

2、开发工具

编辑器：vs code；
测试工具：chrome；
插件：live server + vetur + easy less。

3、初识vue

版本选择

平时学习：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

写项目：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

挂载元素与数据传递

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue</title>
</head>
<body><div id="app"><h1>{{book_name}}</h1><p>{{book_info}}</p></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>new Vue({el: "#app", // 指定一个元素作为根容器// 简洁版data() {return {book_name: "红楼梦",book_info: "一群女人和一个男人的故事"}}// 完整版// data: function() {//     return {//     }// }})
</script>
</html>

methods方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue</title>
</head>
<body><div id="app"><h1>{{book_name}}</h1><p>{{book_info}}</p><p>{{getName('lee')}}</p><p>{{readBook()}}</p></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>new Vue({el: "#app", // 指定一个元素作为根容器// 简洁版data() {// 数据源return {book_name: "红楼梦",book_info: "一群女人和一个男人的故事"}},// 完整版// data: function() {//     return {//     }// },methods: {// 方法getName(name) {return `hello ${name}`;},readBook() {// this始终指向该vue实例return `今天晚上读${this.book_name}`}}})
</script>
</html>

v-bind

作用：把属性值变成动态绑定
格式：v-bind:属性名="js代码"
省略版：:属性名="js代码"

<div id="app"><p><a :href="my_url">百度</a></p><p><input type="text" v-bind:value="book_name"></p><!-- 绑定后的引号内必须是js代码，原内容不再是字符串，要想写入字符串需要给内容加上引号，注意与外边的引号做区分 --><p :style="'color: ' + color">空山新雨后，天气晚来秋</p>
</div>

new Vue({el: "#app", // 指定一个元素作为根容器data() {// 数据源return {book_name: "红楼梦",book_info: "一群女人和一个男人的故事",my_url: "https://www.baidu.com",color: "skyblue"}}
)}

v-text

作用：引入数据，仅限于文本

用法示例：

<div id="app"><p v-text="book_info"></p>
</div>

new Vue({el: "#app",data() {return {book_info: "一群女人和一个男人的故事"}}
)}

v-html

作用：引入数据，将数据中的标签内容进行转义

用法示例：

<div id="app"><p v-html="web_url"></p>
</div>

new Vue({el: "#app",data() {return {web_url: "<a href='https://www.baidu.com'>百度</a>"}}
)}

v-on

作用：绑定事件

用法示例：

<div id="app"><button v-on:click="n++">+1</button><button v-on:click="n--">-1</button><button v-on:click="add(1)">+1</button><button v-on:click="sub(1)">-1</button><!-- 双击 --><button v-on:dblclick="add(10)">+10</button><button v-on:dblclick="sub(10)">-10</button><p>蜂蜜柚子茶{{n}}杯</p>
</div>

new Vue({el: "#app",data() {return {n: 10}},methods: {add(m) {return this.n += m;},sub(m) {return this.n -= m;}}
)}

C4前端云原生学习笔记——vue相关推荐

尚硅谷云原生学习笔记（76~143集）
笔记列表: 尚硅谷云原生学习笔记(1-75集) 尚硅谷云原生学习笔记(76~143集) 尚硅谷云原生学习笔记(144~172集) 尚硅谷云原生学习笔记(173~XXX集) 目录 76.为什么用kube ...
尚硅谷云原生学习笔记（1-75集）
笔记列表: 尚硅谷云原生学习笔记(1-75集) 尚硅谷云原生学习笔记(76~143集) 尚硅谷云原生学习笔记(144~172集) 尚硅谷云原生学习笔记(173~XXX集) 目录 1.什么是云计算 1. ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
360前端星计划学习笔记0410
360前端星计划学习笔记(五)正则的三个应用场景–王峰老师 360前端星计划学习笔记(六)NodeJS基础入门文章目录正则正则表达式的创建和使用创建正则表达式的两种方式正则表达式的常见用法 ...
云平台学习笔记（三）-实践
一.实验目的本实验目的: 1.熟练克隆虚拟机: 2.熟练配置域名解析 3.学会配置 Chrony: 4.学会安装 OpenStack 基础框架: 5.学会安装 Mariadb 数据库 6.熟练为虚拟 ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
Severlet、Tomcat以及前端请求响应学习笔记
Severlet.Tomcat以及前端请求响应学习笔记一:概念 1.什么是Severlet和Tomcat? Severlet是Sun公司制定的一套标准.是使用java语言编写的服务器端程序,用于处理 ...
前端JavaScript的学习笔记
前端知识体系想要成为真正的"互联网Java全栈工程师"还有很长的一段路要走,其中前端是绕不开的一门必修课.本阶段课程的主要目的就是带领Java后台程序员认识前端.了解前端.掌握前 ...

C4前端云原生学习笔记——vue

C4前端云原生学习笔记

文章目录

一、vue知识点

1、vue简介

2、开发工具

3、初识vue

C4前端云原生学习笔记——vue相关推荐

最新文章

热门文章