vue从入门到开发--3-基础语法(1)

  一:v-text指令

    指令v-text:可通过该指令绑定动态数据(动态数据我觉得可以是从服务器请求下来的数据,保存在data里边,然后动态显示在文档中,因为是一个一个的组件,数据应该不会很多吧,就只有这一块的数据内容。)

  

  二:v-if指令

    指令v-if :是否展示当前数据

  

  <p v-if=’show’>{{title}}</p> 此时是不显示的。

  若将show:false 改成 show:true 则title就会在页面中显示。

  三:v-else指令  

    指令v-else:v-if不执行则v-else执行,二者相反.就跟逻辑里面的if(){}else(){}类似的.

  四:v-for指令

    指令v-for:循环遍历数组对象

  

  在页面中就会显示出data里面的所有数据.

  五:v-on指令(指令有很多方法,如鼠标点击或键盘事件等)

    指令v-on:click=”方法名称”; 事件方法,方法内可传参(v-on=click(“hahahaha”));

  

  键盘事件:v-on:keyup=””;v-on:keydown=””;键盘发送(点击回车)消息:v-on:keyup.enter=”事件名称”;

  六:computed

     computed  计算属性(类似数据双向绑定)

    

  下方显示的数据会跟着输入的值的变化而变化.跟react和angular类似的都有数据双向绑定。

  七:用户管理小demo练习

    1)结构部分以及数据部分的显示和绑定,实现的用户的添加以及删除以及选中时候的样式切换,因为是本地且没有服务器支持,没有实现数据的保存和删除,仅仅实现的当前状态下的添加和删除操作。

  

  

  2):vue-router路由设置

  到main.js文件,设置路由服务。

  

  3)导入路由(如果没有这个路由文件,就手动安装一下路由:npm install vue-router --save),并使用中间件,这些是基础配置。

   系统提供的没有"./"路径,自己的文件需要有"./"

  4)然后设置当前的路由

  

  model设置history,在浏览器地址栏有文件路径,设置成这样是为了路径的正确,保证 / 到文件正确

  base:__dirname 当前的路径设置当前的路径

  routes 里面是数组,数字里面的是对象,对象里面的是path,即组件的路径,设置"/"或"",后面设置component:User,表示这个路径下执行的是User组件,设置"/Test"表示这个路径下的vue组件是component:Test组件。

  5)接下来对下面的路由进行处理,因为有了路由,就要让路由有一个可承载的载体(即触发这个路由的东西);

  

  router是导入进来的路由;

  template设置路由载体的地址(es6的语法) ;

  <router-link to="/">User</router-link>(类似a标签,表示路由到的地址);
  <router-link to="/test">Test</router-link>;

  <router-view></router-view>(触发路由之后执行这个路由视图),这个是必须要的.;

  $mount("#app")表示绑定到这个域内.;

  6):现在运行这个项目 npm run dev

  

(PS:新手学习,有不对的地方希望大佬们帮忙纠正,万分感谢!)

时间: 2024-09-28 20:26:38

vue从入门到开发--3-基础语法(1)的相关文章

VBA 开发学习--基础语法2

VBA中的运算符 算数运算符及其作用 + 求两个数的和 -  求两个数的差:求一个数的相反数 *  求两个数的积 /   求两个数的商(保留小数位   5/2=2.5) \   整除 (保留整数位  5\2=2) ^  指数运算(5^3=5*5*5=125) Mod  两数相除取余数  12 Mod 9=3 比较运算符 =   等于 <   小于 > 大于 <= 小于或等于 >= 大于或等于 <> 不等于 IS  比较两个对象的引用变量 Like   比较两个字符串是否

小白入门必学Python基础语法

最近开发中用到Python比较多,所以将Python的基础语法总结出来供Python入门者学习. Unicode Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求.Unicode规定所有的字符和符号最少由16位来表示(2个字节),即:2**16=65536 UTF-8 UTF-8(8-bi

Linux入门第五天——shell脚本入门(下)基础语法之调试debug

一.如何debug 1.通过sh命令的参数: sh [-nvx] scripts.sh 选项与参数: -n :不要执行 script,仅查询语法的问题: -v :再执行 sccript 前,先将 scripts 的内容输出到屏幕上: -x :将使用到的 script 内容显示到屏幕上,这是很有用的参数! 示例1:no news is good news [[email protected] tmp]# sh -n add1_100.sh [[email protected] tmp]# 示例2:

Drools规则工作流引擎全面开发教程(基础语法、性能调优、常用工具)

课程讲师:David 课程分类:其他 适合人群:初级 课时数量:9课时 更新程度:完成 用到技术:Java.Drools 涉及项目:Drools规则工作流引擎 联系方式:需要更多相关资料可以联系 Q2748165793 一.课程背景 1.1 Drools是什么? 规则引擎是一种嵌入在应用程序中的组件,实现了将业务决策从应用程序代码中分离出来,并使用预定义的语义模块编写业务决策.接受数据输入,解释业务规则,并根据业务规则做出业务决策. Drools实现了规则引擎,它是一个业务逻辑集成平台,基于JA

推荐一个课程;Drools规则工作流引擎全面开发教程(基础语法、性能调优、常用工具)

今天给大家推荐一套David老师的课程,一共有9个课时. 什么是Drool 规则工作流引擎呢 ? 规则引擎是一种嵌入在应用程序中的组件,实现了将业务决策从应用程序代码中分离出来,并使用预定义的语义模块编写业务决策.接受数据输入,解释业务规则,并根据业务规则做出业务决策. Drools实现了规则引擎,它是一个业务逻辑集成平台,基于JAVA和RATE算法的产生式规则引擎实现,是Red Hat旗下的开源产品. Drools历史 2001年,Drools问世,基于线性蛮力搜索 在2.0版本后,又基于Ra

Python全栈开发之基础语法

No1. Python语言介绍 详情见百度百科... No.2 Python是一门怎么样的语言 详情在百度百科... No3. Python能做什么 网络应用.桌面应用.系统运维.机器学习.科学计算... 网络应用 Django/Flask/Tornado 桌面应用 PyQt/PySide/wxPython/PyGTK 系统运维 psutil/IPy/dnspython/difflib 机器学习 Scikit-Learn/Statsmodels/PyMC/Shogun 科学计算 NumPy/Sc

R语言入门(二)基础语法

1.help可以提供帮助,如help(nchar), help("[["),或者用?nchar也能获取帮助.example(nchar)可以获取到某个主题的使用方法. 2.nchar获取字符串的长度,nchar(x)返回x中每个字符串的长度,length获取向量的长度,区别如下: > nchar("hello") [1] 5 > nchar(3) [1] 1 > nchar(3000) [1] 4 > help(nchar) > nch

Linux入门第五天——shell脚本入门(下)基础语法之循环与调试

一.循环 1.不定循环 有两种形式: while [ condition ] <==中括号内的状态就是判断式 do <==do 是循环的开始! 程序段落 done <==done 是循环的结束 当 condition 条件成立时,就进行循环,直   到 condition 的条件不成立才停止 until [ condition ] do 程序段落 done 当 condition 条件成立时,就终止循环, 否则就持续 进行循环的程序段.

C#入门基础语法知识点总结(.NET开发环境及代码编写规范)

C#基础语法 一..net开发环境的搭建和使用 1.菜单栏 [文件]-->新建项目-->找到我们需要的项目类型 在新建窗口中,我们新建的项目要求可以在这里选择: (1)版本的选择:建议选择4或者4.6 (2)选择开发语言:一般都是C# (3)项目类型:初学阶段一般都用"控制台"程序.仅仅是学习资源. (4)项目的名称.要有意义. (5)位置:项目所有文件的保存位置.建议不要使用中文目录. (6)解决方案名称:默认和项目名称一致. [视图]-->可以显示各种窗口. [调