2. Vue - 初始
一、vue简单介绍
1. vue定义
vue是一套用于构建用户界面的渐进式框架。vue被设计为可自底向上逐层应用，vue的核心只关注视图层；vue的特点是数据驱动视图，可直接修改数据，不用再手动编写js操作DOM。
2. vue引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3. vue创建
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 声明vue的作用域 -->
<div id="app"></div>
<!-- 创建vue实例 -->
<script>
let app = new Vue({
// 元素声明
el:'#app',
// 数据
data:{
content: "hello world",
},
// 计算属性
computed:{
totalScore: function () {
return this.python + this.linux + this.go;
}
},
// 事件,与v-on联动
methods:{
jump(){
this.num += 1;
}
},
// 侦听事件
watch: {
python: function (value, oldvalue) {
console.log(value, oldvalue)
}
},
// Vue路由
router: router,
// Vue局部组件
components: {
'my-header': header,
}
})
</script>
4. vue小实例
<body>
<div id="app">
<p>vue作者是{{ Author }}</p>
<p v-html="a"></p>
<hr>
<a v-bind:href="BaiduURL">百度</a>
<a :href="BaiduURL">百度</a>
<hr>
<!-- v-for -->
<ul>
<!-- v-for可设置索引，v-key有了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联 -->
<!-- v-key可保证更改数据时，不必再重新for循环，渲染 -->
<li v-for="(item, index) in fruit" v-bind:key="index">
<!-- 双向数据绑定，可输入值，改变数据 -->
<input type="number" v-model.number="item.num">
- {{ item.name }}
<span style="color: red" v-if="item.num == 0">卖完啦！</span>
<button v-on:click="add(index)">+1</button>
</li>
</ul>
<p>水果总数量是：{{ totalNum }}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
Author: 'Youyuxi',
a: '<a href="https://www.sogou.com/">sogou</a>',
fruit: [
{'num': 10, 'name': 'apple'},
{'num': 3, 'name': 'banana'},
{'num': 0, 'name': 'strawberry'},
{'num': 12, 'name': 'orange'},
],
BaiduURL: 'www.baidu.com'
},
<!-- 计算属性 -->
computed:{
totalNum: function () {
return this.fruit.reduce((x,y)=>{
return x+y.num;
}, 0)
}
},
<!-- 绑定事件 -->
methods: {
add(index){
this.fruit[index].num += 1;
}
}
});
</script>
</body>
2. Vue - 初始的更多相关文章
- Vue初始
一 .安装 https://cn.vuejs.org/ 官方网站 二 .简单实用示例 Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使 ...
- 1.Vue初始及相关Vue核心组件
1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...
- Vue的安装及使用快速入门
一.安装vue 1.安装node.js,安装完node.js之后,npm也会自动安装 查询是否安装成功的命令: node -v npm -v 2.全局安装脚手架工具vue-cli,命令如下: npm ...
- vue与TypeScript集成配置最简教程
https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...
- vue源码阅读（二）
一 一个实例 如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程. 那么下边这个则是实例化构造函数,也就 ...
- 编程小白入门分享四：Vue的安装及使用快速入门
一.VUE简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立 ...
- TypeScript从入门到Vue项目迁移
1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript ...
- #学习笔记#e2e学习使用（二）
前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...
- Element-ui安装与使用（网站快速成型工具）
我之所以将Element归类为Vue.js,其主要原因是Element是(饿了么团队)基于MVVM框架Vue开源出来的一套前端ui组件.我最爱的就是它的布局容器!!! 下面进入正题: 1.Elemen ...
随机推荐
- 解决Flask和Django的错误“TypeError: 'bool' object is not callable”
跟着欢迎进入Flask大型教程项目!的教程学习Flask,到了重构用户模型的时候,运行脚本后报错: TypeError: 'bool' object is not callable 这是用户模型: c ...
- python使用beautifulsoup4爬取酷狗音乐
声明:本文仅为技术交流,请勿用于它处. 小编经常在网上听一些音乐但是有一些网站好多音乐都是付费下载的正好我会点爬虫技术,空闲时间写了一份,截止4月底没有问题的,会下载到当前目录,只要按照bs4库就好, ...
- LRU hashMap(拉链) + 双向链表 java实现
//基于 hash (拉链法) + 双向链表,LRUcache //若改为开放寻址,线性探测法能更好使用cpuCache public class LRU { private class Node { ...
- Statements、PreparedStatement及CallableStatement（三）
当获得了与数据库的连接后,就可以与数据库进行交互了.JDBC Statement,CallableStatement和PreparedStatement接口定义了可用于发送SQL或PL/SQL命令,并 ...
- python爬虫之csv文件
一.二维数据写入csv文件 题目要求: 读入price2016.csv文件,将其中的数据读出,将数字部分计算百分比后输出到price2016out.csv文件中 知识点: 对于列表中存储的二维数据, ...
- 解决Fiddler在win7系统下的安全证书问题
如果电脑win7系统,一直解决不了Fiddler的证书安装问题,可以试试下面的办法. 在安装证书的时候一直遇到这个问题. 这是因为win7系统的在.net Framework4.0上面的bug引起的. ...
- WPF 精修篇 DataGrid 筛选
原文:WPF 精修篇 DataGrid 筛选 DataGrid也可以分组 但是用的地方不多 就没写 筛选还是可以的 比如Datagrid数据量比较大 要做数据筛选 贴码 <DataGrid x: ...
- 66000][12505] Listener refused the connection with the following error: ORA-12505, TNS:listener does not currently know of SID given in connect descriptor oracle.n et.ns.NetException: Listener refuse
新装的idea开发工具后连接数据库出现如题所示错误. 1.网上搜了不少的文章,没有解决我的问题.后来细心看了一下url: 一开始url是这样子的. jdbc:oracle:thin:@:s21_pdb ...
- typescript里一些有趣的点
联合类型 在原生的JS里,null和undefined经常会导致BUG的产生, 在ts里,你又想用null,又担心出错的时候 你可以考虑用联合类型,当某值可能为 number或null,你可以声明它的 ...
- Yii2处理密码加密及验证
在Yii2中提供了密码加密以及验证的一系列方法,方便我们的使用,它使用的是bcrypt算法.查看源码我们可以发现它使用的是PHP函数password_hash()和crypt()生成. 加密: /** ...