Vue入门级语法

Vue入门级语法

使用方式

新手学习,只需要以引入即可
学编程怎么能少了hello world


    
        
		Hello World
        
    
      
        
{{ message }}

如果是本地测试,最好把vue.js下载到本地,下载地址:https://vuejs.org/js/vue.js

声明式渲染

  • Vue 是一种MVVM 模式,当vue 和一个挂载点绑定之后就可以操作这个挂载点之下的DOM元素
  • 挂载点,通俗的讲就是一个DOM元素,比如上面的代码,vue的el#app 对应的
    {{ message }}
    这个div就相当于一个挂载点
  • data中可以自定义任意变量,{{}}这就是vue的显示语法,
  • {{message}} 这个的意思是,显示为vue中的 message字段对应的数据为:hello vue
  • 其实除了
    {{ message }}
    这个之外,还可以用
    或者
  • 也就是说除了{{}}语法 还可以用v-text="变量" 或者 v-html="变量" 这种语法的。

条件判断

语法:v-if,如果v-if=true就显示,否则不显示


    
  • 苹果
  • 橘子
  • 香蕉
  • 西红柿
  • 西红柿

如上,西红柿就不会显示,和v-if有点像的有v-show 用法和v-if一样,区别在于

  • v-if 会把dom元素删除掉
  • v-show 不会把dom元素删除,而是通过style标签隐藏掉

数据绑定


    
你还要我怎样 要怎样,你突然来的短信就够我悲伤

v-bind绑定的是DOM元素的属性,当鼠标移到 那行字的时候,title被触发显示我们自定义的数据
当然v-bind不只是可以绑定title属性,

  • v-bind:value
  • v-bind:class
  • v-bind:style
  • 等等。。。

缩写语法::title ,也就是去掉v-bind,直接:加html属性,例如上面的可以写成

你还要我怎样 要怎样,你突然来的短信就够我悲伤

列表循环


    
  • {{item}}
  • {{item.age}}
  • v-for 指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items 形式的特殊语法,items 是源数据数组并且item是数组元素迭代的别名。
  • 后面第二种的写法也可
  • {{item.age}}
  • 就是加了一个index 索引字段

组件基础

自定义一个组件示例:

 Vue.component("fruit-item",{
	props:["item"],
	template: "
  • {{item.cn_name}}-->{{item.en_name}}
  • " });
    • 组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用
    • Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。如上就是item 属性就是,我们就可以通过item 自定义我们的数据
    • prop是一个数组类型,我们可以从外面传多个数据进来
    
    
    
        
        Hello World
        
        
    
    
        

    每一个组件就是一个Vue实例,所以在组件中我们也可以在methods定义方法时间,也可以定义data中定义变量。
    那我们是不是可以说,每个Vue示例就是一个组件呢?是

    表单绑定

    
    
    
        
        model 绑定
        
        
    
    
    

    text:{{text}}








    selected:{{selected}}





    复选框:




    美女:
    财富:
    长生:
    权利:

    • 你可以用 v-model 指令在表单