一、vue简单介绍

1. vue定义

​ vue是一套用于构建用户界面的渐进式框架。vue被设计为可自底向上逐层应用，vue的核心只关注视图层；vue的特点是数据驱动视图，可直接修改数据，不用再手动编写js操作DOM。

2. vue引入

  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  1. <!-- 生产环境版本，优化了尺寸和速度 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. vue创建

  1. <!-- 引入vue -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. <!-- 声明vue的作用域 -->
  5. <div id="app"></div>
  7. <!-- 创建vue实例 -->
  8. <script>
  9.     let app = new Vue({
  10.         // 元素声明
  11.         el:'#app',
  12.         // 数据
  13.         data:{
  14.             content: "hello world",
  15.         },
  16.         // 计算属性
  17.         computed:{
  18.            totalScore: function () {
  19.                 return this.python + this.linux + this.go;
  20.             }
  21.         },
  22.         // 事件,与v-on联动
  23.         methods:{
  24.             jump(){
  25.                 this.num += 1;
  26.             }
  27.         },
  28.         // 侦听事件
  29.         watch: {
  30.             python: function (value, oldvalue) {
  31.                 console.log(value, oldvalue)
  32.             }
  33.         },
  34.         // Vue路由
  35.         router: router,
  36.         // Vue局部组件
  37.         components: {
  38.             'my-header': header,
  39.         }
  40.     })
  41. </script>

4. vue小实例

  1. <body>
  2.     <div id="app">
  3.         <p>vue作者是{{ Author }}</p>
  4.         <p v-html="a"></p>
  5.         <hr>
  6.         <a v-bind:href="BaiduURL">百度</a>
  7.         <a :href="BaiduURL">百度</a>
  8.         <hr>
  9.         <!-- v-for -->
  10.         <ul>
  11.             <!-- v-for可设置索引，v-key有了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联 -->
  12.             <!-- v-key可保证更改数据时，不必再重新for循环，渲染 -->
  13.             <li v-for="(item, index) in fruit" v-bind:key="index">
  14.                 <!-- 双向数据绑定，可输入值，改变数据 -->
  15.                 <input type="number" v-model.number="item.num">
  16.                 - {{ item.name }}
  17.                 <span style="color: red" v-if="item.num == 0">卖完啦！</span>
  18.                 <button v-on:click="add(index)">+1</button>
  19.             </li>
  20.         </ul>
  21.         <p>水果总数量是：{{ totalNum }}</p>
  22.     </div>
  24. 	<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
  25.     <script>
  26.         let app = new Vue({
  27.             el: '#app',
  28.             data: {
  29.                 Author: 'Youyuxi',
  30.                 a: '<a href="https://www.sogou.com/">sogou</a>',
  31.                 fruit: [
  32.                     {'num': 10, 'name': 'apple'},
  33.                     {'num': 3, 'name': 'banana'},
  34.                     {'num': 0, 'name': 'strawberry'},
  35.                     {'num': 12, 'name': 'orange'},
  36.                 ],
  37.                 BaiduURL: 'www.baidu.com'
  38.             },
  39.             <!-- 计算属性 -->
  40.             computed:{
  41.                 totalNum: function () {
  42.                     return this.fruit.reduce((x,y)=>{
  43.                         return x+y.num;
  44.                     }, 0)
  45.                 }
  46.             },
  47.             <!-- 绑定事件 -->
  48.             methods: {
  49.                 add(index){
  50.                     this.fruit[index].num += 1;
  51.                 }
  52.             }
  53.         });
  54.     </script>
  55. </body>

2. Vue - 初始的更多相关文章

  1. Vue初始

    一 .安装   https://cn.vuejs.org/ 官方网站 二 .简单实用示例 Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使 ...

  2. 1.Vue初始及相关Vue核心组件

    1.Vue官方文档 官网文档:https://cn.vuejs.org/v2/guide/ 2.Vue-cli官方文档(脚手架) 官网文档:https://cli.vuejs.org/zh/guide ...

  3. Vue的安装及使用快速入门

    一.安装vue 1.安装node.js,安装完node.js之后,npm也会自动安装 查询是否安装成功的命令: node -v npm -v 2.全局安装脚手架工具vue-cli,命令如下: npm ...

  4. vue与TypeScript集成配置最简教程

    https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...

  5. vue源码阅读（二）

    一 一个实例 如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程. 那么下边这个则是实例化构造函数,也就 ...

  6. 编程小白入门分享四：Vue的安装及使用快速入门

    一.VUE简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立 ...

  7. TypeScript从入门到Vue项目迁移

    1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript ...

  8. #学习笔记#e2e学习使用（二）

    前言: <#学习笔记#e2e学习使用(一)>主要记录了Vue项目的创建到e2e环境的搭建,以及期间遇到的各种问题和解决方法.本文建立在基础测试环境搭建完毕能正确运行的情况下,编写测试代码, ...

  9. Element-ui安装与使用（网站快速成型工具）

    我之所以将Element归类为Vue.js,其主要原因是Element是(饿了么团队)基于MVVM框架Vue开源出来的一套前端ui组件.我最爱的就是它的布局容器!!! 下面进入正题: 1.Elemen ...

随机推荐

  1. Linux安装包生成工具：checkinstall、makeself

    关键词:checkinstall.dpkg.deb/rpm.makeself等等. checkinstall记录make install安装的文件,生成相应的(Slackware/RPM/Debian ...

  2. HTML5应用 转 Android、Windows Phone 应用

    一.HTML5 转 Android 目标SDK:API 20 1.新建一个 Blank Activity 的应用 2.在 AndroidManifest.xml 文件中添加联网权限 <uses- ...

  3. Intellj IDEA 快捷键冲突

    Intellij IDEA快捷键冲突 [问题描述]: ctr + alt + 方向键 与系统的快捷键冲突,按快捷键,屏幕方向发生改变. [解决办法]: ctr + alt + F12 调用出Intel ...

  4. SP1043 GSS1 - Can you answer these queries I 线段树

    问题描述 LG-SP1043 题解 GSS 系列第一题. \(q\) 个询问,求 \([x,y]\) 的最大字段和. 线段树,维护 \([x,y]\) 的 \(lmax,rmax,sum,val\) ...

  5. Java入门之人需要注意的5大步骤

    作为最抢手的程序开发言语之一,Java在互联网领域中的方位无需赘言.抢手也带来了高薪和许多的作业时机,对那些预备通过学习Java来改动自己命运的同学来说,需求做好以下作业. 1.考虑一下 学习Java ...

  6. Servlet一次乱码排查后的总结

    由来 在写一个小小的表单提交功能的时候,出现了乱码,很奇怪request上来的参数全部是乱码,而从数据库查询出来的中文显示到页面正常,锁定肯定是request对象那里出了问题.后来经过排查,发现是我封 ...

  7. 【Java】String的首尾去空和判空

    去除字符串首尾空白字符:包括\t,\r,\n及" ": //去除字符串首尾空白字符:包括\t,\r,\n及" ": System.out.println(&qu ...

  8. 自动编写Python程序的神器,Python 之父都发声力挺！

    ​ 就在不久前,kite——那个能够自己编写python代码的AI,Python 之父 Guido van Rossum 使用之后,也发出了「really love」感叹,向大家墙裂推荐了这一高效工具 ...

  9. python-11-字典的增删改查

    前言 1.dict 字典:{key,vlaue} --key 必须是不可变数据类型,可哈希,--value:任意数据类型 2.dict优点:二分查找去查询--存储大量的关系型数据,可哈希.--无序的, ...

  10. 《js高程》笔记总结二（变量，作用域，内存问题）

    理解基本类型和引用类型的值,理解执行环境,理解垃圾收集 基本类型的值和引用类型的值 基本类型:简单的数据段,引用类型:指可能由多个值构成的对象(在将一个值赋值的时候,解析器必须知道这个值是基本类型值还 ...