vue入门学习示例

鄙人一直是用angular框架的,所以顺便比较了一下。

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue实践</title>
 6     <script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
 7 </head>
 8 
 9 <body>
10     <div id="app">
11         <span>{{message}}</span><br>
12         <input type="text" v-model="mes"><br>
13         <test-prop :prop-val="mes"></test-prop><br>
14         <span>{{reverseMes}}</span><br>
15         <button v-on:click="plus()">点击 click事件</button><br>
16         <button @click="del()">点击-click事件</button><br>
17         <div id="mount-point"></div>
18     </div>
19     <script>
20         var vue = new Vue({
21             el:'#app',
22             data:{//data类似angualar的$scope,可以接收数据或函数,任何字段或函数需要先定义才能使用
23                 message:'hello world~',
24                 mes:'初始值',
25                 i:0
26             },
27             components: {//components类似angular的指令,驼峰命名在html中用‘-’表示,可单向动态传值
28                 'test-prop':{
29                     props:['propVal'],
30                     template: '<div>{{propVal}}</div>'
31                 }
32             },
33             computed:{//computed类似angular的自定义过滤器的函数,函数名可直接在html 中显示,用‘{{}}’,不能用v-bind?
34                 reverseMes: function(){
35                     return this.mes.split('').reverse().join('')
36                 }
37             },
38             methods:{//创建方法函数
39                 plus:function(){
40                     this.message = this.message   '-----' this.i;
41                     this.i  = 1;
42                 },
43                 del:function(){
44                     var index = this.message.lastIndexOf('-----');
45                     this.message = this.message.slice(0,index);
46                     this.i -= 1;
47                 }
48             },
49             watch:{//watch类似angular的$watch,方法中传入两个值(新值,旧值)
50                 mes:function (newV, oldV) {
51                     console.log(newV '-------' oldV);
52                 }
53             }
54         });
55         var newMount = Vue.extend({//创建一个子类
56             template:'<p>my name is {{lastName}}{{firstName}} . my english name is {{alias}}</p>',
57             data: function(){//这里data必须是函数
58                 return {
59                     firstName:'Shaoli',
60                     lastName:'Hong',
61                     alias:'Souleigh'
62                 }
63             }
64         });
65         new newMount().$mount('#mount-point');//$mount类似angular的bootstrap手动启动app,手动地挂载一个未挂载的实例
66     </script>
67 </body>
68 </html>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目实战报异常Exception及决绝方案

1、报LifecycleException&#xff0c;再配置一下jdk即可&#xff0c;然后再手动添加maven 解决方法&#xff1a; 然后,手动添加jar包 2、maven 项目,右键maven build启动项目的时候&#xff0c;报下面错误&#xff0c;没有在pom配置tomcat7插件 3、报找不到beans插件:更新一下项…

世界主要遥感卫星

世界主要遥感卫星QuickbirdSpot-4Spot-4法国“太阳神”1A神舟飞船神舟飞船“哈勃”望远镜RADASAT神舟飞船国际空间站国际空间站 SPOT2Shutsacn IKONOS CBERS-1JersSpot-4 “哈勃”望远镜 CBERS-1 Landsat 5美国“KH-11”侦察卫星 Spot-5 ERS Landsat 7OrbView-3 美国间谍卫星…

VMware配置linux网络步骤

1.我们要用桥接网络模式 2.设置桥接网络&#xff0c;VMnet1或者VMnet0就是桥接网络&#xff0c;我们用的就是桥接 VMnet8是NAT 在上面的图配置好ip和dns&#xff0c;要与windowss是同一个网段&#xff0c;网关一般不设置 3.设置linux网络里面设置这4项&#xff0c;记住dns可以不…

使用IntelliJ书签

这是有关IntelliJ的精美书签功能的快速帖子。 IntelliJ使您可以为单行代码添加书签。 将某行添加为书签后&#xff0c;您可以使用多种方法直接跳回到该行。 因此&#xff0c;最好在您经常使用的代码位置添加书签。 要创建一个新书签&#xff0c;只需在代码编辑器中按F11键。 …

用js写水仙花数

...js//输入一个三位数&#xff0c;水仙花数就是个位的三次方 十为的三次方 百位的三次方之和等于本身console.log(请输入一个三位数&#xff1a;);let a readline.question();if (a > 100 && a < 999) {if (parseInt(a / 100) ** 3 parseInt(a % 100 / 10) ** …

keras 打印模型图

keras中可以使用 from keras.utils import plot_model plot_model(model,to_filemodel_auth.png,show_shapesTrue) #show_shapesTrue可以把输入输出的shape一起打印 注意&#xff0c;最好是给每个层命名&#xff0c;命名好之后打印出来的才会带名字。程序运行的时候也有一定的指…

C# -- 多线程向同一文件写入

1. 多线程向同一文件写入Log. public delegate void AsyncLog(string str1, string str2);private void Test() {Console.WriteLine("Test Start...");for (int i 0; i < 100; i){AsyncLog asyLog1 new AsyncLog(WriteLog);asyLog1.BeginInvoke("EventActi…

Java中的命名参数

创建具有许多参数的方法是一个主要的缺点。 每当需要创建这样的方法时&#xff0c;就在空气中闻一闻&#xff1a;这是代码的味道。 强化单元测试&#xff0c;然后进行重构。 没有借口&#xff0c;没有屁股。 重构&#xff01; 使用构建器模式&#xff0c;甚至更好地使用Fluent …

CSS学习笔记3:选择器及优先级

CSS选择器的类型&#xff1a;标签选择器类选择器ID选择器全局选择器群组选择器后代选择器 1.标签选择器&#xff1a;以HTML的标签作为选择器&#xff0c;凡是选择了一个标签&#xff0c;那么所有这个标签的内容都是用了css样式用法很简单&#xff0c;直接在style中 标签{}即可声…

Eclipse开发,编译,打包常见问题总结------持续更新

在使用Eclipse开发&#xff0c;编译&#xff0c;打包常见问题如下&#xff1a; 1、 保证本地开发的客户端与服务端使用的jdk版本一致 2、 保证本地开发的客户端与服务端使用的依赖jar包版本一致&#xff08;比如本地thrift 客户端使用的libthrift版本和服务端使用的libthrift…

ECMA-335 (CLI) 标准 读书笔记——总结CLI类型系统(上)

看到类型系统的概述时&#xff0c;就忍不住按图索骥&#xff0c;想搞清楚CLI如何定义的整个类型系统。于是翻遍了整个标准&#xff0c;将类型系统中最核心的、与运行平台密切相关的类型定义与说明整理了出来&#xff0c;以供理清思路。 标准的第四部指出&#xff0c;CLI的核心是…

流口水可执行模型

可执行模型是对引擎处理的Drools最低级别模型的重新设计。 在当前的系列&#xff08;最多6.x&#xff09;中&#xff0c;可执行模型在过去的8年中有机地增长了&#xff0c;从未真正成为最终用户的目标。 建议那些希望以编程方式编写规则的人通过代码生成和目标drl来完成&#x…

centos7安装openjdk8

首先&#xff0c;打开openjdk安装官网 http://openjdk.java.net/install/ 输入安装命令&#xff1a; su -c "yum install java-1.8.0-openjdk" 装完之后会有提示版本跟安装的路径&#xff1b;在/usr/lib/jvm下可以查看到对应的名字&#xff0c;ls-l 配置环境变量&…

CSB文件上传漏洞 -->Day4(图片挂马)

22二号&#xff0c;冬至啦&#xff0c;深圳这边只有5&#xff08;尊嘟好冷啊&#xff09;&#xff0c;写这篇文章的时候都已经是凌晨一点了&#xff0c;相信大部分的人都在温暖的被窝里面了吧&#xff01;&#xff01;&#xff08;可怜的我&#xff0c;还得写writeup&#xff0…

微信小程序禁止刷新之后苹果端还可以下拉的问题

一、问题描述 最近在做一个小程序项目&#xff0c;需要禁止下拉刷新&#xff0c;于是在page.json里面添加了这段话 "enablePullDownRefresh":false 全局关闭下拉刷新&#xff0c;这段话确实禁止了下拉刷新&#xff0c;无论是安卓手机端还是苹果端&#xff0c;但是在…

Win32 Application和Win32 Console Application的区别

Win32 Application和Win32 Console Application都是工作在32位Windows环境的程序。其中Win32 Application就是普通的常见的窗口应用程序&#xff0c;当然有的界面做得比较个性化&#xff0c;比如圆形的、不规则形状的……它们都是所谓的GUI(Graphics User Interface图形用户接口…

调试OpenJDK

knowyourmeme.com/photos/531557 THX为mihn 有时调试Java代码还不够&#xff0c;我们需要逐步了解Java的本机部分。 我花了一些时间来实现JDK的正确状态&#xff0c;所以简短的描述可能对开始旅行的人很有用。 我将使用全新的OpenJDK 9&#xff01; 首先&#xff0c;您必须通过…

算法题解:旋转数组的最小数字

题目描述 把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;我们称之为数组的旋转。输入一个非递减排序的数组的一个旋转&#xff0c;输出旋转数组的最小元素。 解题思路 将旋转数组对半分可以得到一个包含最小元素的新旋转数组&#xff0c;以及一个非递减排序的数组。新…

函数的自执行,变量提升和函数提升

其实之前虽然刚开始学习JavaScript的时候经常看到function add(){}、var addfunction(){}、function(){}之类的这种写法&#xff0c;但是具体是什么叫什么却没有去考虑过这个问题…… function add(){}这种写法叫做函数声明 var addfunction(){}这种写法叫做函数表达式 fun…

Python之机器学习-sklearn生成随机数据

sklearn-生成随机数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties from sklearn import datasets %matplotlib inline font FontProperties(fname/Library/Fonts/Heiti.ttc) 多标签分类数据…