vue2 基础（二）

最新推荐文章于 2025-02-17 10:29:19 发布

cvper

最新推荐文章于 2025-02-17 10:29:19 发布

阅读量228

点赞数

分类专栏： vue 文章标签： vue methods v-on 点击事件

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79998792

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------

上一篇我们开始接触了一点点vue基础的东西，下面继续；

上一篇我们尝试了将数据渲染到页面中，我们的数据是直接在data中的，我们看一下上次写的代码：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
  <!-- 第一步 在这里引入我们的vue文件 --> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
  <!-- 第二步,在网页中添加点内容吧 --> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span>{{message}}</ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  // 第三步首先new 一个Vue()，这一步是固定的，就这么写就行了, 
 
  // 下面首先会设置 el 这个也是固定的，el代表我们这个Vue绑定到哪个元素上， 
 
  // 后面写上div的ID就可以了，我们的ID 是 main, 注意加#  
 
  // data代表数据，可以理解为一个data对象，我们在对象里面写了一个message属性 
 
  // 并且message 的值为：我就是数据部分 ; 
 
  // 这么简单的设置之后，我们在span 中写上{{message}},就可以在span 中显示message; 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:{ 
 
   message: 
  "我就是数据部分" 
 
   } 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

我们来改造一下上面的东西，我们把上面的数据部分拿到外面看看：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span>{{message}}</ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  let abc 
  ={ 
 
   message: 
  "我就是数据部分2" 
 
   } 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:abc 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

这样子和一开始我们的方式其实是没有区别的，只是把数据部分拿了出来而已，let 是 ES6 的写法，你可以暂时理解为 var ；

这样子Vue里面的data 后面只要写上我们的对象 abc 就行了；

上面算是一个回顾，下面我再看看新的东西：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span>{{message}}</ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  let abc 
  ={ 
 
   message: 
  "我就是数据部分2" 
 
   } 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:abc, 
 
  //methods是固定的写法，里面放着我们定义的函数， 
 
   methods:{ 
 
  //我们定义了一个doclick 函数 
 
  doclick: 
  function(){ 
 
  alert( 
  "我是一个事件"); 
 
   }, 
 
  //我们定义了一个doabc函数 
 
  doabc: 
  function(){ 
 
  alert( 
  "我是一个函数"); 
 
   } 
 
   } 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

上面我们又在Vue( )中添加了一个methods , 这个里面放着的是我们定义的函数，或者说事件处理；

上面我们虽然定义了两个函数，但是并没有执行，如何执行呢？

我们需要把事件绑定到元素上，比如下面我们把第一个函数 doclick 绑定到<span> 上面，然后我们

点击<span> ,就会弹出 “我是一个事件”；

这么写：

     <!DOCTYPE html> 
   
     < 
    html 
    lang= 
    "en"> 
   
     < 
    head> 
   
     < 
    meta 
    charset= 
    "UTF-8"> 
   
     < 
    title>vue2基础</ 
    title> 
   
     < 
    script 
    src= 
    "vue.js"></ 
    script> 
   
     </ 
    head> 
   
     < 
    body> 
   
     < 
    div 
    id= 
    "main"> 
   
     < 
    span 
    v-on:click= 
    "doclick">{{message}}</ 
    span> 
   
     </ 
    div> 
   
     < 
    script> 
   
    let abc 
    ={ 
   
     message: 
    "我就是数据部分2" 
   
     } 
   
    new 
    Vue({ 
   
     el: 
    "#main", 
   
     data:abc, 
   
    //methods是固定的写法，里面放着我们定义的函数， 
   
     methods:{ 
   
    //我们定义了一个doclick 函数 
   
    doclick: 
    function(){ 
   
    alert( 
    "我是一个事件"); 
   
     }, 
   
    // doclick(){ 这样写也是可以的 
   
    // alert("我是一个事件");  
   
    // }, 
   
    //我们定义了一个doabc函数 
   
    doabc: 
    function(){ 
   
    alert( 
    "我是一个函数"); 
   
     }, 
   
    // doabc(){ 这样写也是可以的 
   
    // alert("我是一个函数");  
   
    // } 
   
     } 
   
     }); 
   
     </ 
    script> 
   
     </ 
    body> 
   
     </ 
    html>