<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

    <p v-text="temp"></p>

    <div v-html="thtml"></div>

    <p>{{num1+num2}}</p>

    <p>{{num1+10}}</p>

    <p>{{mtemp?888:999}}</p>

    <p v-show="vs">澳洲生物学家发现新草本植物，薯片味的</p>

    <p v-if="vif">DIY：五种配方简单的唇膏</p>

    <p v-else="velse">美军将在武器系统中加入人工智能</p>

    <div v-for="item in userlist">

        <ul>

            <li>{{item.name}}</li>

            <li>{{item.age}}</li>

            <li>{{item.gender}}</li>

        </ul>

    </div>

    <input type="text" v-model="showtemp">

    <p>{{showtemp}}</p>

    <input type="button" value="显示我" v-on:click="showme">

    <select v-model="sel">

        <option value="111">111</option>

        <option value="222" selected>222</option>

        <option value="333">333</option>

    </select>

</div>

<script>

 var vm=new Vue({

     el:"#app",

     data:{

         temp:"morgana",

         showtemp:'',

         sel:'111',

         thtml:"<button>heeh<button>",

         num1:1000,

         num2:10,

         mtemp:true,

         vs:true,

         vif:true,

         userlist:[{'name':'hope','age':18,'gender':'girl'},

                   {'name':'katherine','age':8,'gender':'girl'},

                   {'name':'morgana','age':28,'gender':'girl'},

                   ]

     },

     methods:{

         showme:function(){

//             alert(this.showtemp)

             alert(this.sel)

         }

     }

 })

 setTimeout(function () {

     vm.temp="hope"

 },2000)

</script>

</body>

</html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <script src="axios.js"></script>

</head>

<body>

<div id="app">

    <input type="button" value="clickme" v-on:click="showme">

    <ul>

        <li v-for="item in items">

            {{item.cityCode}}

            {{item.cityName}}

        </li>

    </ul>

</div>

</body>

<script>

    new Vue({

        el:"#app",

        data:{

            items:[]

        },

        methods: {

            showme: function () {

                var self = this;

                var url = 'hotcity.json'

                axios.get(url, {

                    params: {

                        username: "egon",

                    }

                }).then(function (response) {

                    self.items = response.data.data.hotCity;

                })

                    .catch(function (error) {

                        console.log(error)

                    })

            }

        }

    })

</script>

</html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

    <script src="axios.js"></script>

</head>

<body>

<div id="app">

    username:<input type="text">

    password:<input type="password">

    <input type="button" value="login" v-on:click="login">

</div>

<script>

    new Vue({

        el:"#app",

        data:{

            username:'',

            password:''

        },

        methods:{

            login:function(){

                var url="hotcity.json";

                axios.post(

                    url,{username:this.username, password:this.password,},

                    {"headers":{"Content-Type":"application/x-www-form-urlencodeed"}}

                    ).then(function(response){

                    console.log(response)

                }).catch(function (error) {

                    console.log(error)

                })

            }

        }

    })

</script>

</body>

</html>

　　

vue日常练习一的更多相关文章

  1. vue 日常开发小细节

    1. element-ui 日期选区禁用,设置属性 disabledDate: (time) => { const curDate = (new Date()).getTime() const ...

  2. vue日常问题总结

    1.Vue项目启动后首页URL带的#该怎么去掉? vue-router中默认使用的是hash模式,URL中带有#号,我们可以用如下代码修改成history模式: import Vue from 'vu ...

  3. Vue日常开发问题

    1.sh: webpack-dev-server: command not found 我的公众号:

  4. vue日常学习（2）

    1.组件学习之内容分发 1.1 作用域插槽 父级 <div class="parent"> <child> <template scope=" ...

  5. vue日常学习

    1.$refs可以用来进行父子级间通信.ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件.用法如下parent.$refs.idname 使用方法: 在父级元素上加上ref属性 &l ...

  6. Vue日常报错

    报错信息: Error: Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (inte ...

  7. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

  8. Vue packages version mismatch的解决方法 初来乍到，踩坑日常

    初来乍到,踩坑日常 这个问题也是我也是接受别人项目,出现的问题,在下载好依赖后运行的时候报这样的错误 它上面显示两个版本一个vue的版本,一个vue-template-compiler版本,我这边忘了 ...

  9. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

随机推荐

  1. centos6.5 安装JDK

    今天在自己的centos机子上安装jdk,发现以前的教程都比较旧了,很多东西都过时了.今天把自己安装的感受写一下. 判断是否安装 首先,我们得判断机子上是不是安装了jdk,好多人推荐使用java -v ...

  2. python基础1 - 多文件项目和代码规范

    1. 多文件项目演练 开发 项目 就是开发一个 专门解决一个复杂业务功能的软件 通常每 一个项目 就具有一个 独立专属的目录,用于保存 所有和项目相关的文件 –  一个项目通常会包含 很多源文件 在 ...

  3. SQL Server 2016 —— 聚集列存储索引的功能增强

    作者 Jonathan Allen,译者         邵思华         发布于     2015年6月14日   聚集列存储索引(CC Index)是SQL Server 2014中两大最引 ...

  4. 元数据（MetaData）

    元数据是用来描述数据的数据(Data that describes other data).单单这样说,不太好理解,我来举个例子. 下面是契诃夫的小说<套中人>中的一段,描写一个叫做瓦莲卡 ...

  5. 分享知识-快乐自己：Java中的经典算法之冒泡排序(Bubble Sort)

    原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将 ...

  6. Python—numpy.flatnonzero()

    numpy.flatnonzero(): 该函数输入一个矩阵,返回扁平化后矩阵中非零元素的位置(index) 这是官方文档给出的用法,非常正规,输入一个矩阵,返回了其中非零元素的位置. 1 >& ...

  7. sgu176 有源汇上下界最小流

    题意:有一堆点和边,1起点,n终点,某些边有可能必须满流,要求满足条件的最小流 解法:按原图建边,满流的即上下界都是容量,但是这样按有源汇上下界可行流求出来的可能不是最小流,那么我们需要开始建边的时候 ...

  8. The 2016 ACM-ICPC Asia Dalian Regional Contest

    一共a了6题 A:找二分图,判断有没有冲突或者孤立的店 题解:直接dfs即可 #include<map> #include<set> #include<cmath> ...

  9. Java面试题上

    1.面向对象的特征有哪些方面?答:面向对象的特征主要有以下几个方面:- 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这些 ...

  10. ural 2018 The Debut Album（dp￥）

    2018. The Debut Album Time limit: 2.0 secondMemory limit: 64 MB Pop-group “Pink elephant” entered on ...