博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue的基础使用
阅读量:5106 次
发布时间:2019-06-13

本文共 1818 字,大约阅读时间需要 6 分钟。

Vue是渐进式的JavaScript框架

多看中文文档()

前端框架和库(jQuery)的区别

功能上的不同

jquery库:包含DOM(操作DOM)+请求,就是一块功能。art-template库:模板引擎渲染,高性能的渲染DOM    (我们后端的一种模板  跟python的模板类似)框架:大而全的概念,简易的DOM体验+请求处理+模板引擎在KFC的世界里,库就是一个小套餐,框架就是全家桶。

 

nodejs

  • 去官网下载       
  • 打开终端cmd:执行  node   -V  如果出现版本号代表node成功
  • 使用npm  
    • 在cmd中找到自己要初始化化的项目路径

      npm  init  --yes 会自动生成一个package.json文件

    • 下载依赖包  

      npm  install  vue  --save

      npm  install jquery  --save

    • 卸载包   npm  uninstall  vue  -save
    • 下载项目所有的依赖包   npm  install

Vue的起步               

  •  引包
  • 创建实例化对象
new Vue({el:'#app',//目的地data:{    msg:"hello Vue"}});/*{
{}}: 模板语法插值 {
{变量}} {
{1+1}} {
{'hello'}} {
{函数的调用}} {
{1==1?'真的':'假的'}}*/

 

指令系统

//常用v-text v-html v-ifv-showv-forv-bindv-on 在vue中它可以简写: v-bind: :class 等价于 v-bind:class :src 等价于v-bind:src :id 等价于v-bind:id v-on:click 等价于 @click = '方法名'

 

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。//保存数组或者对象 格式v-for = '(item,index) in menuList'v-for = '(value,key) in object'//item指的是数组中每项元素//index指的是数组中的下标的索引

 父组件向子组件传递数据:通过Prop

1.在子组件自定义特性。props:['自定义的属性1','自定义属性2']    当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样  2.要在父组件中导入的子组件内部 绑定自定义的属性 

 

例如:

父组件

import Vfooter from './components/Vfooter'

export default {

  name:'app',
  data (){
  return{
    citys:[
      "沙河","平西府","天通苑"
    ]
  },

  components:{

    Vfooter,

  }

}

 </script>

 

子组件

 

自定义方法

 

 

 

补充一个淘宝NPM:

 

转载于:https://www.cnblogs.com/Zhao--C/p/10146463.html

你可能感兴趣的文章
python3 Flask安装
查看>>
js弹出div层,弹出层页面底部出现UL出现一条线问题
查看>>
debian下安装wps office
查看>>
装备属性转移脚本
查看>>
Python控制电脑
查看>>
在LINQ TO SQL 中使用MVC3中的DataAnnotations 【MetadataType】
查看>>
MSSQL2005约束(五)-default约束
查看>>
[Codeforces Round #159 (Div. 2)]A. Sockets
查看>>
【转载】Cacti安装的详细步骤
查看>>
weblogic设置数据库自动重连
查看>>
[数据结构][LINUX内核编程]学习笔记(二)
查看>>
Spring AOP 理论
查看>>
Java EE、Java SE和Java ME
查看>>
为什么要使用MQ消息中间件?它解决了什么问题?
查看>>
二手书网页版mis系统
查看>>
Oracle_高级功能(9) 性能优化
查看>>
OpenGL入门程序二:绘制简单的圆
查看>>
计算线段和圆的交点
查看>>
extjs中修改confirm的显示按钮
查看>>
linux2.4.0源码下载地址(配合毛德操情景分析)
查看>>