【翠花学Vue】每日打卡—

Vue框架与jQuery的区别

jQuery是基于操作dom的库。

Vue框架是以数据驱动和组件化开发为核心。

学习Vue

在学习vue 之前需要下载node.js（相当于一个平台，可以下载自己所需要的插件），以及vscode软件。

下载Vue

在D盘根目录创建1个文件夹，名字随意，这边取名为vue1。

wind+R打开comd窗口，输入如下内容。(如果@后面不加版本号，默认下载最新版本3)

npm install vue@2.5

此时在D盘vue1目录下即可看到所下载的vue。

打开node_modules文件夹，进入vue文件夹，即可看到不同的js文件。我们常用的是vue.js。

在vue1目录下创建一个文件夹，此文件夹为项目的文件夹，名字随意，这里取名为317project。

编写vue项目

打开vscode软件，点击打开文件夹，选择刚刚所创建的317project。

点击第二个图标，表示新建文件夹，文件夹名为vue1。

点击新建文件夹，取名为js，将刚刚找到的vue.js拖进去，再点击新建文件，文件名为index.html。

在 index.html里输入！，回车，即可看到html的基本内容。

在页面上写一个div标签，标签id自取，标签内部留一个坑，用来做vue渲染所用，有且仅有一个。并导入vue.js文件。

导入之后实例化。

el:渲染区域，

data：声明变量。

实例化之后使用插值表达式{{变量名}}，在刚刚的坑位写上实例化的变量。

四步做完之后下载如下插件，alt+B即可在浏览器中看到所输内容。

vue渲染区域

如果在渲染区域下面再写一个div标签，使用插值表达式写上刚刚所实例化的变量。

这时候看到新写的div没有被渲染到。

在vue1文件夹下在创建一个html文件，输入如下内容。

template：表示使用模板替换渲染区域中的所有内容，

如果我在模板中再添加一个h1标签，则会报错。

表示不能够编译这个模板，因为组件模板必须包含在一个根元素下面。

这时候可以给这两个h1标签添加一个根元素，即可渲染根元素下的所有内容。

v-text v-html

在vue目录下再创建一个html文件，输入如下内容。

效果为：

表示text是无法解析的，而html是可以解析的。

v-if v-else-if v-else

在html文件里输入如下内容：相当于是java中的if,else if ,else

v-show,v-for

v-bind ，v-model

单向绑定：内存影响页面，页面改变不会改变内存。v-bind:属性

双向绑定：内存影响页面，页面改变同样会改变内存 v-model

【翠花学Vue】每日打卡——vue打卡1相关推荐

「后端小伙伴来学前端了」分析Vue脚手架结构
傍晚的月亮前言每日匆匆忙忙的写老师布置的 Vue 项目,对于 Vue 始终没有一个系统的认知,每天都是遇到什么问题就去查什么样的问题.看起来好像也没啥问题,但是所有的知识都是混入的,导致没有一个像 ...
【初级】个人分享Vue前端开发教程笔记 | 打卡每天一份劝退技能
大家好,我是魔王哪吒,很高兴认识你~~ 哪吒人生信条:如果你所学的东西处于喜欢才会有强大的动力支撑. 每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起 ...
Vue每日签到日历渲染
Vue每日签到日历渲染 `Vue每日签到日历渲染` `先上图` `template` `script` `style` Vue每日签到日历渲染先上图 template <template> ...
模拟阴阳师抽卡-vue
模拟阴阳师抽卡-vue 模拟阴阳师抽卡链接原文链接 1.概率说明我分了两种 (1)平常的概率:R阶78.75%,SR阶20%,SSR阶1%,SP阶0.25% (2)活动2.5倍概率:SP阶0.62 ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
vue 1.0和vue 2.0的变化和区别
一.在每个组件模板,不在支持片段代码 vue 1.0是 <template><h3>我是组件</h3><strong>我是加粗标签</strong ...
【Vue知识点- No2.】vue脚手架、基础API
No2.vue脚手架.基础API 必安装-vue-devtools 搜索vue-devtools回车-然后添加至Chrome等待下载后自动安装-右上角显示已经添加即代表成功 vscode-插件补充 v ...
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You
之前自己安装的vue版本是2.9.6的但是最近项目需要,cli的命令vue create无法使用,报错 vue create is a Vue CLI 3 only command and you a ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
js 获取vue组件html_关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

【翠花学Vue】每日打卡——vue打卡1

Vue框架与jQuery的区别

学习Vue

【翠花学Vue】每日打卡——vue打卡1相关推荐

最新文章

热门文章