1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.     <title>Document</title>
  7.     <script src="https://vuejs.org/js/vue.js"></script>
  8. </head>
  9. <style>
  10.     img{
  11.         width: 200px;
  12.         height: 328px;
  13.     }
  14. </style>
  15. <body>
  16.     <div id="app">
  17.         <p v-if = "showEl">Show The Para</p>
  18.         <br>
  19.         <a href="#" v-on:click = "toggle">点击切换显示状态</a>
  20.         <!-- v-on指令用于绑定事件监听器,监听原生的dom事件 -->
  21.         <br>
  22.         <a v-bind:href = "url">跳转</a>
  23.         <!-- v-bind:动态更新html元素上的属性,比如id和class等,当改变了数据时,链接和图片会自动更新 -->
  24.         <br>
  25.         <input type="text" v-model = "imgName">
  26.         <br>
  27.         <h3>新的图片名称:{{ imgName }}</h3>
  28.         <br>
  29.         <img v-bind:src = "imgUrl" >
  30.         <!-- 数据驱动DOM是Vue.js的核心理念,通常只要维护好数据,Vue就会处理好DOM的事 -->
  31.     </div>
  32.     <div id="calcprop">
  33.         {{ reversedText }}
  34.     </div>
  35.  
  36.     <div id="totalPrice">
  37.         <button v-on:click = "changeNumber">增加ipad的数量(价格5555)</button>
  38.         总价:{{ totalprices }}
  39.     </div>
  40.  
  41.     <div id="fullName">
  42.         <input type="text" v-model = 'firstName'>
  43.         <br>
  44.         <input type="text" v-model = 'lastName'>
  45.         全名:{{ fullname }}
  46.     </div>
  47.  
  48.     <div id="reverseByMethods">
  49.         <!-- 这里是方法,所以要加括号! -->
  50.         <input type="text" v-model = "text">
  51.         <!-- 这里的text更新会实时反映到data中的text,再传递到methods中的rT函数进行转置 -->
  52.         转置后的文本:{{ reversedText() }}
  53.     </div>
  54.  
  55.     <div id="now">
  56.         Date.now()(computed): {{ now1 }}
  57.         <br>
  58.         Date.now()(methods): {{ now2() }}
  59.     </div>
  60. </body>
  61. <script>
  62.     // vue的指令与事件
  63.     var imgData = {
  64.         imgFile:'img/'
  65.     }
  66.     var app = new Vue({
  67.        el:"#app",
  68.        data:{
  69.            showEl:true,
  70.            url:'https://www.baidu.com/',
  71.            imgName:'405263107437.jpeg',
  72.         //    imgUrl:'img/405263107437.jpeg'
  73.        },
  74.        methods: {//vue将methods中的方法也代理了,所以可以像访问vue数据那样调用方法
  75.            toggle:function(){
  76.                this.showEl = !this.showEl;
  77.            },
  78.            init:function(text){
  79.                console.log(text);
  80.            }
  81.        },
  82.        mounted() {
  83.            this.init("初始化调用");
  84.        },
  85.        computed:{
  86.            imgUrl:function(){//在这里改变imgUrl的值,而不是在data中改变
  87.                return imgData.imgFile + this.imgName
  88.            }
  89.        }
  90.     });
  91.     app.init("外部调用");
  92.     var calcprop = new Vue({
  93.        el:"#calcprop",
  94.        data:{
  95.            text:'abcdefg',
  96.        },
  97.        computed: {
  98.            reversedText:function(){
  99.                //this指向当前vue实例
  100.                return this.text.split('').reverse().join('');
  101.            }
  102.        },
  103.     });
  104.     //在计算属性中可以完成各种复杂的逻辑,只需最终返回一个结果就可以
  105.     // 计算属性还可以依赖多个vue实例的数据,并且只要有一个数据更新,计算结果就会更新
  106.     var calcPrice = new Vue({
  107.        el:"#totalPrice",
  108.        data:{
  109.            package1:[
  110.                {
  111.                    tradeName:'iphone X',
  112.                    price:9999,
  113.                    count:4
  114.                },
  115.                {
  116.                    tradeName:'ipad air 2',
  117.                    price:5555,
  118.                    count:1
  119.                }
  120.            ],
  121.            package2:[
  122.                {
  123.                    name:'cocacola',
  124.                    price:3,
  125.                    count:24
  126.                },
  127.                {
  128.                    name:"sprite",
  129.                    price:3,
  130.                    count:12
  131.                }
  132.            ]
  133.        },
  134.        computed:{
  135.            totalprices:function(){
  136.                var totalprices = 0;
  137.                for(var i = 0;i<this.package1.length;i++){
  138.                    totalprices += this.package1[i].price * this.package1[i].count;
  139.                }
  140.                for(var i = 0;i<this.package2.length;i++){
  141.                    totalprices += this.package2[i].price * this.package2[i].count;
  142.                }
  143.                return totalprices;
  144.            }
  145.        },
  146.        methods:{
  147.            changeNumber:function(){
  148.                this.package1[1].count += 1;
  149.            }
  150.        }
  151.     });
  152.     var fullName = new Vue({
  153.        el:"#fullName",
  154.        data:{
  155.            firstName:'',
  156.            lastName:''
  157.        },
  158.        computed:{
  159.            fullname:{
  160.                //getter
  161.                get:function(){
  162.                    return this.firstName + ' ' + this.lastName;
  163.                }
  164.            }
  165.        }
  166.     });
  167.  
  168.     var reverseByMethods = new Vue({
  169.        el:"#reverseByMethods",
  170.        data:{
  171.            text:'123456'
  172.        },
  173.        methods:{
  174.            reversedText:function(){
  175.                return this.text.split('').reverse().join('');
  176.            }
  177.        }
  178.  
  179.        //可以看到在这里使用methods定义方法也可以实现效果,同时可以传入参数,为什么还需要使用computed?
  180.        //只有在text改变时计算属性才更新
  181.     });
  182.  
  183.     var dateNow = new Vue({
  184.         el:"#now",
  185.         data:{
  186.  
  187.         },
  188.         methods: {
  189.             now2:function(){
  190.                 return Date.now();
  191.             }
  192.         },
  193.         computed: {
  194.             now1:function(){
  195.                 return Date.now();
  196.                 //now()方法返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数，类型为Number。
  197.                 // 因为 now() 是Date的一个静态函数，所以必须以 Date.now() 的形式来使用。
  198.             }
  199.         },
  200.     });
  201. </script>
  202. </html>

各部分gif演示及说明：

1.

总感觉v-if的功能远远不止这些

2.这个是有点丑陋，图片应该自适应,文件格式实际上也应该省略掉，整理完这篇去试试

--4-28--: 超出能力范围了，我想的是把常用的格式以数组保存在imgData这个对象里，用for循环挨个拼接后输出有效的值，结果发现并不知道如何判定这个url对应的文件是真实存在的...

发现在data中一个数据是不能去读取另一个在同一个data下的，而且也不应该有这个必要，应当在计算属性（名为“计算”的这个属性）或者方法中进行获取和操作

同时如果在data中写死了imgUrl(就像上面被注释掉的那行一样)，那么这个效果就无法实现，在devtools中会发现imgUrl被固定成了一开始写好的

3.

这个没啥好说的，Vue

Vue stage2的更多相关文章

  1. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  2. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

  3. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  4. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  5. webpack 构建简单的vue项目

    ---恢复内容开始--- webpack主要执行流程: 入口→loader处理→出口 // webpack.config.js 文件:const path = require('path') // 引 ...

  6. vue客户端渲染首屏优化之道

    提取第三方库,缓存,减少打包体积 1. dll动态链接库, 使用DllPlugin DllReferencePlugin,将第三方库提取出来另外打包出来,然后动态引入html.可以提高打包速度和缓存第 ...

  7. Vue全家桶（Vue-cli、Vue-route、vuex）

    摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置.内部指令.全局API.选项.内置组件) 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这 ...

  8. vue build错误异常的解决方法

    在生成vue项目的时候,出现如下错误 ERROR in static/js/index.d66d806fcdd72b36147b.js from UglifyJs Unexpected token: ...

  9. VUE项目中使用mint-ui框架总结

    针对PC端,element-ui可谓是首选了,UI体验效果很好. element-ui 框架官网:http://element.eleme.io/#/zh-CN/component/installat ...

随机推荐

  1. Python 汉诺塔

    在汉诺塔游戏中,有三个分别命名为A.B.C得塔座,几个大小各不相同,从小到大一次编号得圆盘,每个原盘中间有一个小孔.最初,所有得圆盘都在A塔座上,其中最大得圆盘在最下面,然后是第二大,以此类推. 游戏 ...

  2. 防F12扒代码：按下F12关闭当前页面

    只要按下那神秘的审查元素.按下那神秘的F12键,奇迹出现了!网站变成了空白页,可谓杀防君子放火必备佳品!一段JavaScript代码即可实现上述功能,插入到 footer.php 的 </bod ...

  3. ZZFAFA_BilibiliMusic_DownUrl

    OneDrive_DownFileUrl: FHProductionHK-BGM:https://1drv.ms/f/s!Ajs97XY1QSQ8cPXo36h4AK9XG7k CABAL&A ...

  4. 用汇编语言角度来理解C语言的一些问题

    在汇编的世界里,整数的存在和表示是没有有符号数和无符号数之分的,都是用数的补码表示,有无符号的计算是靠指令来进行确定.如JA/JB是用于无符号数的跳转指令,而JG/JL则是用于有符号数的指令.汇编中的 ...

  5. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  6. 安装netcat(-bash: netcat: command not found)

    安装netcat 在用swoole UDP服务器可以使用netcat -u 来连接测试时,报错-bash: netcat: command not found,是因为centos7未安装netcat. ...

  7. logback root level logger level 日志级别覆盖？继承？

    1. logback-spring.xml 配置 <appender name="STDOUT" class="ch.qos.logback.core.Consol ...

  8. visual studio 2017下载地址

    因为Visual studio 2017采用的是下载安装模式,所以下载比较慢,安装不方便.所以,这几天将下载过的visual studio 2017的文件打包成ISO文件并存到了百度网盘.希望对现在需 ...

  9. 关于微信小程序获取二维码的踩坑记录

    1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...

  10. Creating Excel files with Python and XlsxWriter——Introduction

    XlsxWriter 是用来写Excel2007版本以上的xlsx文件的Python模块. XlsxWriter 在供选择的可以写Excel的Python模块中有自己的优缺点. #---------- ...