【Vue】Vue的基本语法与使用

目录

Vue的使用步骤：

Vue.js的模本语法

   1.插值表达式

   2.事件绑定

      1、监听事件

      2、事件处理方法

      3、事件修饰符

     4.按键修饰符

     3.属性绑定

     4、分支循环结构

        1)分支结构：

        2)循环结构

        v-for遍历数组

---

        Vue是一种渐进式JS框架，对于熟悉HTML，CSS，JS知识的学生很容易上手，并且它可以在一个库和一个完整框架之间自如伸缩。

Vue的使用步骤：

             1）提供标签用于填充数据

             2）引入vue.js库文件

             3）使用Vue语法做功能

             4）将Vue提供的数据填充到标签里面

    

      
      
{{msg}}
      

      

      

        
num
        点击1
        点击2
        点击3
      
    
    
    
    
  

Vue.js的模本语法

   1.插值表达式

        1）最常见最基本的形式是使用{{……}}的文本插值

     
{{ message }}

       2)、v-text

       v-text指令填充纯文本，他会替代显示对应的数据对象上的值，当绑定的数据对象的值发生变化的时候，插值处的内容也会随之更新。

        注：此处为单向绑定，数据对象的值改变，插值会发生变化，但是当差值发生变化不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。

  {{ message }}

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

        注：vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值

这个将不会随msg属性的改变而改变: {{ msg }}

        3)、v-html

        v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

    


var app = new Vue({
   el : '#app',
   data : {
     html: "v-html"    
 }
})

        4)、v-model

        v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

  

var app = new Vue({
   el : '#app',
   data : {
   message : 'hello world'    
 }
})

   2.事件绑定

      1、监听事件

        可以使用v-on来进行DOM事件的监听，并在触发时运行一些JS代码。

      2、事件处理方法

        对于逻辑比较复杂的事件，直接在JS代码中邪v-on不太可行，因此v-on还可接收一个需要调用的方法名称。

  
  Greet


    
  

      3、事件修饰符

        1）.stop:阻止单击事件继续传播（阻止冒泡，）

        语法：

//阻止链接的跳转

        2）.prevent:阻止默认事件发生

        语法：

        3).capture:捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自    然顺序执行触发的事件。

        语法：

//如果没有使用.capture, 点击按钮的时候, 就会先触发函数2, 然后触发函数1, 
//添加了.capture, 点击按钮的时候, 就只会先触发函数1, 然后触发函数2

	

        4).self:只有点击自身时才会触发事件

        语法：

//如果没有使用.self, 点击按钮的时候, 就会先触发函数2, 然后触发函数1,
// 添加了.self, 点击按钮的时候, 就只会先触发函数2,只有点击div盒子本身,才会触发函数1

	

        注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

        5).once:事件触发一次

        语法：

     4.按键修饰符

        1).  .enter：enter键

        2).tab：tab键

        3).delete：删除（退格）键

        4).esc:ESC键

        5).space:空格键

        6).up:上键

        7).down:下

        8).left:左

        9).right:右

        如下：enter和delete的实例，当按下delete键是，会清空用户名，当按下enter键是会进行提交操作。当然了，如果想执行其他的操作，只需要将enter和delete后面的方法名换掉，方法内容更换即可。

 
    

      

        用户名：

        密码：

        
      
    
    
    
  

     3.属性绑定

        属性绑定样式的语法：

//v-bind指令用法
跳转
//缩写语法
跳转

     

     4、分支循环结构

        1)分支结构：

v-if
v-else
v-else-if
v-show

       根据学生的程序判断学生登记的判断实例： 

    

      
      显示
    
    

      
优秀
      
良好
      
一般
      
比较差
    

    
    
  

        2)循环结构

        v-for遍历数组

                             

                            

  
    

      
水果列表
      

        
{{item}}
        

          {{fruit.id+'-----'+fruit.cname+'------'+fruit.ename}}
        
        

          {{id+'-----'+cname+'------'+ename}}
        
      
    
    
    
  

显示结果：