初学Vue.js,从头来过~

之前上课也学过vue.js,但是一遍过下来,实话,没有记住什么,所以决定自己在对照着文档过一遍,所以之后会弄一些基础的东西,还请大神们莫喷~~~~今天先给平台打一个预防针,Young C  要来啦~~  吼吼,基础中的基础。那这里,不能全是大白话,咱们先说点干的吧,比如说 如何安装Vue.js。。。。哈哈 ~~  是不是被简单的惊到了,  慢慢来。。。。。所以要淡定,淡定。。。。。
复制代码

安装Vue.js 方法

- 直接引用 vue.js 文件<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-NPM安装# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm run dev
复制代码

初识vue很多还屡不清,所以按照文档,敲了下,留下来理解.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><script src="../../node_modules/vue/dist/vue.js"></script></head><body><!--app--><div class="app"><p style="color: brown">app</p>{{message}}</div><!--app2--><div class="app2"><p style="color: brown">app2</p><span :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span></div><!--app3--><div class="app3"><p style="color: brown">app3</p><p v-if="start">现在看到我了</p></div><!--app4--><div class="app4"><p style="color: brown">app4</p><ul><li v-for="item in list">{{item.text}}</li></ul></div><!--app5--><div class="app5"><p style="color: brown">app5</p><p>{{message}}</p><button @click="fanzhuan">点击翻转</button></div><!--app6--><div class="app6"><p style="color: brown">app6</p><p>{{message}}</p><input v-model="message"></div><!--app7--><div class="app7"><p style="color: brown">app7</p><ol><todo-itemv-for="item in app7List":todo="item":key="item.id"></todo-item></ol></div><script>let app = new Vue({el:'.app',data:{message:'hello,word'}});//-----------------------app2let app2 = new Vue({el:'.app2',data:{message:'页面加载于' + new Date().toLocaleString()}});//--------------------app3let app3 = new Vue({el:'.app3',data:{start:true}});//--------------------app4let app4 = new Vue({el:'.app4',data:{list:[{text:'从头'},{text:'再来'},{text:'一遍'}]}});app4.list.push({text:'测试'});//--------------------app5let app5 = new Vue({el:'.app5',data:{message:'hello,js.vue'},methods:{fanzhuan(){this.message = this.message.split('').reverse().join('');}}});//-------------------app6let app6 = new Vue({el:'.app6',data:{message:'hello,js.vue'}});//-------------------app7Vue.component('todo-item',{props:['todo'],template:'<li>{{todo.text}}</li>'});let app7 = new Vue({el:'.app7',data:{app7List:[{id:1,text:'蔬菜'},{id:2,text:'水果'},{id:3,text:'主食'}]}})</script></body></html>复制代码

以上是根据官方文档敲出来的,可忽略。

转载于:https://juejin.im/post/5adeb2b06fb9a07ac021e132

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

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

相关文章

从Microsoft Teams技术栈看前端技术发展趋势

在前不久的微软美国一年一度的Ignite大会上&#xff0c;微软宣布Microsoft Teams是微软历史上发展最快的应用。它将取代Skype for business&#xff0c;成为语音视频协作的主打产品。 我也有幸在上个月微软中国年度技术大会Tech Summit 2018上被邀请作为讲师讲解基于Teams平台…

LeetCode 最大正方形

在一个由 0 和 1 组成的二维矩阵内&#xff0c;找到只包含 1 的最大正方形&#xff0c;并返回其面积。 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0输出: 4解法&#xff1a;判断以某个点为正方形右下角时最大的正方形时&#xff0c;那它的上方&#xff0c;左方和左上…

solidity字符串拼接

如果你希望马上开始学习以太坊DApp开发&#xff0c;可以访问汇智网提供的出色的在线互动教程&#xff1a; 以太坊DApp实战开发入门去中心化电商DApp实战开发当你开始学习使用solidity开发以太坊智能合约之后&#xff0c;很快你会碰到一个问题&#xff1a; 在solidity中该如何拼…

Confluence Cloud的Teams Message Extension

Confluence Cloud的Message Extension现在正式登入Microsoft Teams。 它可用于团队频道和私人聊天&#xff0c;使您的对话更具描述性和信息性。 从Microsoft Teams应用商店获取Confluence Cloud应用程序并连接到Confluence Cloud实例。 连接后&#xff0c;您将能够搜索Conflue…

45 | 打蛇打七寸:精准测试

转载于:https://www.cnblogs.com/lmx0621/p/10614966.html

Teams App统计

周末闲来无事&#xff0c;统计了一下Teams的app商店里的app ( Teams App Store )。截至到现在&#xff08;2018年11月&#xff09;一共有145个app。要注意一点&#xff1a;如果app不是公开的&#xff08;即单独安装到Office365租户里&#xff0c;并没有提交到office store&…

你必须要懂的APK瘦身知识

随着业务复杂度的逐渐增加&#xff0c;代码、资源也在不断的增加&#xff0c;此时你的APP大小也在增加。从用户层面来说&#xff0c;面对动辄几十兆的APP来说在非WIFI情况下还是会犹豫要不要下载&#xff0c;不下载你就可能因此失去了一个用户。从公司层面来讲&#xff0c;流量…

DHT网络

(基础技术) 现在有一种方法&#xff0c;可以通过磁力链接&#xff0c;例如magnet:?xturn:btih:0482e0811014fd4cb5d207d08a7be616a4672daa&#xff0c;就可以获取BT文件。 这个是通过DHT网络来实现的。 DHT网络是一个去中心化的&#xff0c;分布式信息存储系统。 存储的信息就…

Java基础 Day04(个人复习整理)

分支结构 2、switch语句 因为if语句的级联式最多只会处理三种情况&#xff0c;如果出现多情况 1>可以继续使用if语句的级联式&#xff0c;但是可能代码的可读性就会变差。  2>采用switch语句来解决。 switch语法格式&#xff1a; switch (存在多种情况的变量) {case 值…

java如何获取一个double的小数位数

前言 看标题是不是觉得这是一个很简单的问题&#xff0c;我一开始也是这么认为的&#xff0c;但是实际情况下&#xff0c;在各种情况下我们都进行了测试&#xff0c;发现很多实际情况是无法不尽如人意的。 方法分析 当前能想到的比较容易有下面几种 1、直接使用double处理 2、将…

Node文件模块

在上一篇文章中有提到&#xff0c;Node模块分为核心模块和文件模块&#xff0c;接下来就简单总结一下文件模块。 文件模块则是在运行时动态加载&#xff0c;需要完整的路径分析、文件定位、编译执行过程、速度相比核心模块稍微慢一些&#xff0c;但是用的非常多。这些模块需要我…

PHP GD库解析一张简单图片并输出

这里只演示一下2种颜色值的图片&#xff0c;简单描述下概念。 首先要安装下GD库。否则下面的代码运行不了。 $size getimagesize(2.png); // 获取图片大小 $res imagecreatefrompng(2.png); // 获取指定图片的资源对象for ($i 0; $i < $size[1]; $i) {for ($j 0; $j &…

Permutations CodeForces - 736D (矩阵逆)

对于删除每个对(x,y), 可以发现他对答案的贡献为代数余子式$A_{xy}$ 复习了一下线代后发现代数余子式可以通过伴随矩阵求出, 即$A_{xy}A^*[y][x]$, 伴随矩阵$A^*|A|A^{-1}$可以通过高斯消元$O(\frac{n^3}{\omega})$求出 #include <iostream> #include <algorithm> …

开发Teams的messaging extension

什么是Messaging Extension Messaging Extension是微软Teams的一种十分有用的扩展方式。可以让用户发送adaptive cards。具体的说明不在这里展开了。可以阅读微软官方的详细说明&#xff1a; https://docs.microsoft.com/en-gb/microsoftteams/platform/concepts/messaging-e…

归并排序(转)

转载自&#xff1a;https://www.cnblogs.com/chengxiao/p/6194356.html 归并排序&#xff08;MERGE-SORT&#xff09;是利用归并的思想实现的排序方法&#xff0c;该算法采用经典的分治&#xff08;divide-and-conquer&#xff09;策略&#xff08;分治法将问题分(divide)成一些…

Site24x7 为Teams提供可智能 DevOps

我们生活在一个云的时代, SaaS 应用程序每天都在推动我们的生产力。作为一个消费者, 很难想象如果你最喜欢的应用无法访问&#xff0c;即使只是一秒钟无法访问。作为 SaaS业务, 更难以想象您的服务面临停机, 每一分钟停止服务都会花费大量的资金, 当然还损失客户的信任。Site24…

XUbuntu22.04之跨平台容器格式工具:MKVToolNix(二百零三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

redis集群搭建踩坑笔记

推荐参考教程&#xff1a;https://blog.csdn.net/pucao_cug/article/details/69250101 错误&#xff1a; from /usr/lib/ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55:in require from /usr/local/redis-3.0.6/src/redis-trib.rb:25:in <main> 解决&#xff1a; g…

Docker 创建镜像

文章首发自个人网站&#xff1a;https://www.exception.site/docker/docker-create-image 本文中&#xff0c;您将学习 Docker 如何创建镜像&#xff1f;Docker 创建镜像主要有三种&#xff1a; 基于已有的镜像创建&#xff1b;基于 Dockerfile 来创建&#xff1b;基于本地模板…

hdfoo站点开发笔记

为了安全,也要兼顾编辑器切换管理 开发时不必管目录名称的事, 只是在部署的时候,才修改应用目录和tp目录的名字就行了. 为了提高tp的加载效率, 始终给app和tp以绝对路径.就是以 realpath来定位 realpath返回的就是 一个绝对路径, 在lx中是以 斜杠 根树开始的. 参数可以是文件名…