【前端VUE的学习】

最新推荐文章于 2023-01-08 18:39:58 发布

daydayUp.

最新推荐文章于 2023-01-08 18:39:58 发布

阅读量353

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_35315154/article/details/89341163

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

起因：最近搞起了java，发现一个个人觉得不错的框架。

连接renren框架

包含了常用，和SSM等等，前端使用了vue，所以学习一下。

一、学习准备

1.工具。采用了vscode。据说能写C++，python等等。我先用来学vue（找不到补全vue代码的插件。？—？）。webstrom，总是需要激活的服务连接，弃用。

2.下载vue.js。菜鸟教程的vue.js。转到页面保存就好了。我看的vue js视频教学vue js火速上手

3.稍微回忆了一下，angular.js。（个人理解）使用了js搭的一个面向数据的框架，ng指令，服务，可以自定义路由，拆分html。看看vue.js的有没有这些功能。

二、开始

准备知识：

要点是要包含vue js的文件、命名一个应用块，在new Vue中声明。最后会提供一个示例代码。

v-if：

作为条件判断，<标签 v-if="条件" ></标签>

v-for：

<标签 v-for="item in items " ></标签>。常用来做遍历

v-on:

标签事件。如：点击，鼠标移入移出。

提供了事件修饰符，如keyup可以精确到某个键。提供了常用键的别名

可以缩写。如：v-on:事件.事件修饰符。简写为 @事件.事件修饰符。

所有事件一览

computed 计算属性：

用来对页面数据，处理。如：展示一个学习成绩表。总分可以作为一个计算属性，无需后端提供。

component 组件：

封装一块html代码，也包含的标签的事件。

平行组件的通信：

通过vue的Event,实现通信。放入：event.$emit('key',vlue);.取出：event.$on('key',function(data){}

directive 自定义指令：

定义自定义指令，获得自定义指令的，信息，对数据处理。

Vue.directive('tips',function (el,binding) {
            console.log(el);//元素本身  <span >tips:xxx</span>
            console.log(binding);//指令的值。 show
            console.log(binding.modifiers);//获得指令修饰符 left
            console.log(binding.arg);//获得指令的传参 warn
            el.style.color = binding;
            
        })

slot 插槽：

类似于实现了标签模块的placeholder.

三、遇到的问题

设置多个new Vue，之后，定义的组件事件失效。没有报错。（）

设置自定义组件，使用<template>必须要用一个div包含里面的内容。

四、实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
    <style>
    .active{
        color:green
    }
    
    </style>
</head>
<body>

    <ul>

            <li><a href="#vmodel">v-model</a></li>
            <li><a href="#von">v-on事件处理</a></li>
            <li><a href="#vbind">v-bind</a></li>
            <li><a href="#vif">v-if控制流</a></li>
       
        

    </ul>


    <span>入门</span>
    <div id="app">
        {{text}}
    </div>
    <div id="app2">
        <input type="text" v-model="text2">
        <h3>v-show</h3>
        <span>如果有数据就显示text2:</span>
        <span v-show="text2">text2:{{text2}}</span>
        <h3>v-if see=true</h3>
        <span v-if="see">
            you see it
        </span>
        <span v-if="!see">
                you don't see it.
            </span>
         <h3>v-for </h3>   
         <span>遍历数据展示</span>
          <ul>
              <h4>对象属性列表</h4>
              <li v-for="item in items">
               item.name: {{item.name}}

              </li>
              <li>------对象列表------</li>
              <li v-for="item in items2">
                 item: {{item}}
              </li>
          </ul>
          <h3 id="vbind">v-bind</h3>
          <span>使用v-bind可以把数据与html标签中的属性绑定</span>
          <div>
            <img v-bind:src="img" alt="">

          </div>
          <span>使用v-bind,将样式类名与值绑定。v-bind:class="" 简写 :class="{类名： 变量名}"</span>
          </br>
          <span>原样式颜色 color</span></br>
          <span :class="{active: isTrue}">isTrue=true的颜色 color</span>
          

    </div>
<div id="app3">
<h3 id="von">v-on指令，绑定事件</h3>
<span>v-on:事件，如v-on:click = "function(arg...)"</span>

<button v-on:click="myfun()">click</button>


<h3>v-on:事件.时间修饰符。 简写@事件.事件修饰符</h3>
<ul>
    <li><span>v-on:click.stop 停止冒泡事件</span></li>
    <li><span>v-on:keyup.keycode 如：v-on:keyup.13 vue提供按键别名 v-on:keyup.enter</span><input type="text" v-on:keyup.enter="getcode($event)"></li>
    <li><span>v-on:change <input type="text" @change="myfun()"></span></li>


</ul> 

<h3 id="vmodel">on-model.修饰符 </h3>
<span>   如：v-model.lazy 懒加载，相当于触发change事件，触发更新数据 </span>
<span>   如：v-model.trim 去空格 </span>
<span>   如：v-model.number 设置数字类型变量</span>

<h4>单选框radio</h4>
male<input type="radio" v-model="sex" value="male">
female<input type="radio" v-model="sex" value="female">
</br>
<span>sex:{{sex}}</span>

<h4>多选框checkbox</h4>
cai1<input type="checkbox" v-model="veg" value="veg1">
cai2<input type="checkbox" v-model="veg" value="veg2">
</br>
<span>veg:{{veg}}</span>
<h4>单选</h4>
<select name="" v-model="singS1">
        <option value="1">v1</option>
        <option value="2">v2</option>
        <option value="3">v3</option>
        <option value="4">v4</option>

</select>
<span>单选singS1:{{singS1}}</span>
<h4>多选</h4>
<select name="" v-model="singS2" multiple>
        <option value="1">v1</option>
        <option value="2">v2</option>
        <option value="3">v3</option>
        <option value="4">v4</option>

</select>
<span>多选singS2:{{singS2}}</span>

<h3 id="vif">控制流指令</h3>
<span>role:'{{role}}'</span>
<div v-if="role == 'admin'">
    role is admin
</div>
<div v-else-if = "role == hr">
    role is hr
</div>
<div v-else>

v-else
</div>

<h3>计算属性</h3>
<span>在 new Vue中定义computed:{属性：function(){}}}</span>
<table border="1">
        <th>科目</th>
        <th>分数</th>
        
<tbody>
        <tr>
                <td>数学</td>
                <td><input type="text" v-model.number="math"></td>
            </tr>
    <tr>
        <td>物理</td>
        <td><input type="text" v-model.number="phy"></td>
    </tr>
    <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="eng"></td>
        </tr>
        <tr>
                <td>sum</td>
                <td>{{sum}}</td>
                
            </tr>
            <tr>
                    <td>avg</td>
                    <td>{{avg}}</td>
                    
                </tr>
                                    

</tbody>
</table>
</div>

    <!-- <script src="./js/vue.min.js"></script> -->
    <script src="./js/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script ">
/*组件*/
Vue.component('myA',
{
    tempalte:'#myA',
    props: ['username'],
    methods:{
        myc:function () {
            console.log(this.username);
        }
    }


})


Vue.component('user',
{
    tempalte:'<h1>username:{{username}}<h1>',
    props: ['username'],
    methods:{
        myc:function () {
            console.log(this.username);
        }
    }


})
new Vue({
    el:"#app4"

    
    })
// 注册




  new Vue({
    el:"#app",
    data:{
        text:"hello Vue js!"
    
    }
    
    })

new Vue({
el:"#app2",
data:{
    text2:"hello Vue js!",
    see:true,
    items:[
        {
            name:"zxc"
        },
        {
            name:"xxx"
        }


    ],
    items2:{
        url:"text.com",
        num:1,
        count:2
    }
    ,
    img:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d8d48aa8a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3ce863f8b519c45d688d53f20d0.jpg"
    ,
    isTrue:true
}

})

new Vue ({
    el:"#app3",
    data:{
        sex:"female",
        veg:[],
        singS1:[],
        singS2:[],
        role:'admin',
        math:50,
        phy:50,
        eng:50
    },
    computed: {
        sum:function(){
            return this.math +this.phy+this.eng;
        },
        avg:function () {
            return this.sum/3;
        }
    },
    methods:{
        /**函数名：function（参数） */
        myfun:function(){
            alert("click");
        },
        getcode:function(e){
            var a = e.keyCode;
            console.log("key code:" + a);
        }

    }
})





</script>
</body>

</html>

daydayUp.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端VUE的学习】

起因：最近搞起了java，发现一个个人觉得不错的框架。连接renren框架包含了常用，和SSM等等，前端使用了vue，所以学习一下。一、学习准备1.工具。采用了vscode。据说能写C++，python等等。我先用来学vue（找不到补全vue代码的插件。？—？）。webstrom，总是需要激活的服务连接，弃用。2.下载vue.js。菜鸟教程的vue.js。转到页面保存就好了。我...
复制链接

扫一扫

专栏目录