一、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 - 初始的更多相关文章

  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. netperf 网络测试工具

    软件介绍: netperf是惠普公司开源的一款针对网络性能的测试工具,主要基于TCP或UDP的传输.根据应用的不同,可以进行批量数据传输(bulk data transfer)模式和请求/应答(req ...

  2. Python踩坑系列之安装pycrypto报错：“Microsoft Visual C++14.0 is required”问题。

    由于要使用Python3实现des3加密要使用pycrypto模块,所以使用pip install pycrypto 来安装,然后就常规性掉坑.安装报错“Microsoft Visual C++14. ...

  3. windows下切换Python运行环境。

    1.首先确保你的系统里已经安装了Conda,打开命令行窗口,执行命令:conda --version 2.查看你的系统当前已有的Python环境,执行命令:conda info --envs,从图中我 ...

  4. Web-[RoarCTF 2019]Easy Calc

    看看题目内容,一个计算器,并且过滤了非数字的值,查看源码,上了waf,并且在calc.php显示waf的规则 <?php error_reporting(0); if(!isset($_GET[ ...

  5. C++ class外的 >> 重载，输入流，重载示例。不应该定义类内的>>重载

    #include <iostream> // overloading "operator >> " outside class // >> 应该 ...

  6. LG4158 「SCOI2009」粉刷匠 线性DP

    问题描述 LG4158 题解 设\(opt[i][j][k]\)代表到\((i,k)\)刷了\(j\)次的方案数. 一开始DP顺序有点问题,调了很长时间. 务必考虑清楚DP顺序问题 \(\mathrm ...

  7. redhat7.7（centOS7）安装ORACLE 11g出坑教程及问题总结与解决

    写在前面: 环境建议:VM 15.5,因为15.5修复了诸多bug,可以在安装过程中省去不少麻烦 添加新的虚拟机安装redhat7.7 准备redhat7.7的安装包...百度云不让上传噢噢噢噢,这里 ...

  8. SpringMVC拦截器和数据校验

    1.什么是拦截器 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理.例如通过拦截器可以进行权限验证.记录请求 ...

  9. 惊！Python能够检测动态的物体颜色！

    本篇文章将通过图片对比的方法检查视频中的动态物体,并将其中会动的物体定位用cv2矩形框圈出来.本次项目可用于树莓派或者单片机追踪做一些思路参考.寻找动态物体也可以用来监控是否有人进入房间等等场所的监控 ...

  10. Thymeleaf入门与基础语法

    1.简介 Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML.可以在直接浏览器中正确显示 ...