前端VUE框架

一、什么是VUE?
   它是一个构建用户界面的JAVASCRIPt框架
   vue不关心你页面上的是什么标签,它操作的是变量或属性

为什么要使用VUE?

   在前后端分离的时候,后端只返回json数据,再没有render方法,前端发送ajax请求(api=url)得到数据后,要在页面渲染数据,如果你js+css实现就太麻烦了,这时候VUE就出现了。
二、怎么样使用VUE

1)引入vue.js
    <script src=vue.js></script>
2) 展示html
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
3)建立vue对象
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: ""
            }
        })

三、VUE指令

1.   v-model

<body>      <div id="app">        <input v-model="msg">          <p>{{msg}}</p>          <input type="button" value="变化" @click="change">    </div>    <script>        new Vue({            el: "#app", //表示在当前这个元素内开始使用VUE            data:{              msg: "aaaaa"            },            methods: {                change: function () {                    this.msg = 8888888;                }            }

})    </script>

</body>

2.  v-on

<style>    ul li{        list-style: none;        display: inline-block;        border: 1px solid cornflowerblue;        height:40px;        line-height: 40px;        width: 120px;        text-align: center;    }</style>

<body>
    <div id="mybox">
        <ul>
            <li>
                <span v-on:click="qh(true)">二唯码登录</span>
            </li>
            <li>
                <span v-on:click="qh(false)">邮箱登录</span>
            </li>
        </ul>

        <div v-show="temp">
            <img src="erma.jpg">
        </div>
        <div v-show="!temp">
            <form action="http://mail.163.com" method="post">
                <p><input type="email"></p>
                <p><input type="password"></p>
                <p><input type="submit" value="登录"></p>
            </form>
        </div>
    </div>
    <script>
        new Vue({
            el: "#mybox",
            data: {
                temp: true
            },
            methods: {
                qh: function (t) {
                    this.temp = t
                }
            }
        })
    </script>
</body>

3.   v-bind

<style>
        .bk_1{
            background-color: cornflowerblue;
            width: 200px;
            height: 200px;
        }
        .bk_2{
            background-color: red;
            width: 200px;
             height: 200px;
        }
        .bk_3{

            border: 5px solid #000;
        }
</style>

<body>
    <div id="app">
        <a href="http://www.qq.com" v-bind:title="msg">腾讯</a>
        <div :class="bk"></div>
        <div :class="bk2"></div>

        <div :class="{bk_2:temp}">fdjjdjdkdkkeedd</div>
        <div :class="[bk2,bk3]">8888888888</div>
    </div>
    <script>
       var vm =  new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我想去腾讯公司上班",
                bk:"bk_1",
                bk2:"bk_2",
                bk3:"bk_3",
                temp: false
            }
        })
    </script>
</body>

4.    v-for

<body>
      <div id="app">
        <ul>
            <li v-for="(item,index2) in arr">
                {{item}}: {{index2}}
            </li>
        </ul>

          <ul>
            <li v-for="(item,key,index) in obj">
                {{item}}: {{key}}:{{index}}
            </li>
        </ul>
          <ul>
            <li v-for="item in obj2">
                {{item.username}}
                {{item.age}}
                {{item.sex}}
            </li>
        </ul>

          <div v-for="i in 8">
              {{i}}
          </div>

          <input type="button" value="点我吧!" @click="show()">

          <a :href="url">我想去百度</a>

    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                arr: [11,22,3344,55],
                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},
                obj2:[
                    {username: "jason"},
                    {age: 20},
                    {sex: "male"}
                ],
                str: "我来了",
                url: "http://www.qq.com"
            },
            methods: {
                show: function () {
                    this.arr.pop();
                }
            }
        })

    </script>

</body>

5.   v-if / show

<body>
      <div id="app">
       <p v-if="pick">我是刘德华</p>
       <p v-else>我是张学友</p>

       <p v-show="temp">我是赵本山</p>

       <p v-show="ok">你喜欢我吗?</p>

    </div>
    <script>
        var vm = new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })

         window.setInterval(function(){
             vm.ok = !vm.ok;
         },1000)

    </script>

</body>

6.   v-html

<body>
      <div id="app">
        <ul>
            <li>
                <input type="checkbox">苹果
            </li>
            <li>
                <input type="checkbox">香蕉
            </li>
            <li>
                <input type="checkbox">香梨
            </li>
            <li>
                <input type="checkbox" v-on:click="create()">其它
            </li>
            <li v-html="htmlstr" v-show="test">
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "app", //表示在当前这个元素内开始使用VUE
            data:{
                htmlstr: "<textarea></textarea>",
                test: false
            },
            methods: {
                create: function () {
                    this.test = !this.test;
                }
            }
        })
    </script>
</body>

7.    模板对象

<body>
      <div id="app">
        <p>{{msg}}</p>
        <p>{{80+2}}</p>
        <p>{{20>30}}</p>
        {{msg}}
          我是:<h1 v-text="msg">{{str}}</h1>
          你是:<h1 v-text="msg">2222222222222</h1>

          <h2 v-html="hd"></h2>
          <h2 v-html="str"></h2>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我是老大",
                hd: "<input type=‘button‘ value=‘你是小三‘>",
                str: "我要发财!"
            }
        })
    </script>
</body>

8.    小综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
      <div id="app">
        <div>
            <input type="text" placeholder="姓名" v-model="username">
            <input type="text" placeholder="年龄" v-model="age">
            <input type="button" value="增加" @click="add">
        </div>
          <div>
                <table cellpadding="0" border="1">
                    <tr v-for="(item,index) in arr">
                        <td><input type="text" class="txt" v-model="item.username"> </td>
                        <td>{{item.age}}</td>
                        <td>{{index}}</td>
                        <td><input type="text" class="txt"></td>

                        <td><input type="button" value="删除" @click="del(index)"></td>
                    </tr>
                </table>
          </div>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                username: "",
                age: "",
                arr: []
            },
            methods: {
                add: function () {
                    this.arr.push({username:this.username,age: this.age});
                    console.log(this.arr);
                },
                del: function (index) {
                    this.arr.splice(index,1);
                }
            }

        })

    </script>

</body>
</html>

9.   自定义指令:相关网址   https://cn.vuejs.org/v2/guide/custom-directive.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
      <div id="app">
            <input type="text" v-focus>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{

            },
            directives: {
                focus: {    //指令的名字
                    //当被绑定的元素插入到 DOM 中时
                    inserted: function (tt) {
                        tt.focus();
                        tt.style.backgroundColor = "blue";
                        tt.style.color = "#fff"
                    }
                }
            }

        })

    </script>

</body>
</html>

原文地址:https://www.cnblogs.com/liuwei0824/p/8351757.html

时间: 2024-11-05 19:43:51

前端VUE框架的相关文章

前端Vue框架 01

1.前言:路飞项目所有知识点概况(了解) Vue框架:前台界面,页面逻辑 1)指令 2)实例成员 3)组件 4)项目开发 DRF框架:数据(接口) 1)基础的模块:请求.响应.解析.渲染 2)序列化.三大认证 3)过滤.搜索.排序.分页 4)异常.第三方jwt.restful接口规范 Luffy项目:前后台分离项目 1)项目的登录认证.课程商机销售.项目完成 2)短信.支付宝.服务器.上线.redis.celery.git 2.Vue框架介绍 1)定义:javascript渐进式框架 渐进式:可

前端-vue框架介绍

目录 vue介绍 vue的使用 引入 挂载点 插值表达式 文本指令 属性指令 事件指令 事件指令传参 表单指令 条件指令 vue介绍 渐进式javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,js功能的集合体,vue可以更好更强大的去管理页面 1)vue可以控制一个页面中的一个标签 2)vue可以控制一个页面 3)vue可以控制整个项目 js要控制页面,需要在页面中script引入js==>vue项目就只有一个页面==>组件化开发 优点: 1.三大前台框架:Angular.

前端vue框架应用雏形

一.环境准备: 1.安装运行环境 node.js,安装完成后验证:node -v , npm -v: 2.安装国内源:npm install -g cnpm --registry=https://registry.npm.taobao.org: 二.创建工程: 1.切换到文件目录下,DOS命令窗口运行:vue create 项目名: 2.使用 webstorm打开工程目录,在终端terminal下安装插件: 全局安装vue-cli脚手架:cnpm install -g @vue/cli 安装el

前端vue框架 路由的安装及使用

安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动 使用: 1.在mian.js下引入路由 import VueRouter from 'vue-router' 2.在mian.js下使用路由 Vue.use(VueRouter) 3.在mian.js下配置路由 const router(定义一个名字)=new VueRouter({ rotes:[ {path:"(路由)",component

前端vue框架(四)

vue项目搭建和项目目录介绍.组件.路由 Vue项目环境搭建 1.安装node,官网下载,安装到本地 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2.下载node后,便能获得npm(npm相当于一个应用商城,与后端python中的pip类似) 由于使用npm下载插件是用的外网,下载速度慢,所以建议换源安装 cnpm (cmd窗口下进行换源) >: npm install -g cnpm --registry=https://registry.npm.taoba

前端Vue框架 02 斗篷指令:v-cloak, 指令: 属性指令:v-bind, 表单指令:v-model, 条件指令:v-show v-if, 循环指令:v-for

1.斗篷指令(了解) """ v-cloak:避免屏幕闪烁 1)属性选择器,会将v-cloak属性所在的标签隐藏 2)当vue环境加载后,会将v-cloak属性解析移除,所以内容{{ num }}就会显示出来 3)而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到 页面从{{ num }}闪烁成数值10 """ <style> [v-cloak] { display: none; } </style> <

前端Vue框架 04 路由:逻辑跳转、路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,element-ui,(jq+bs))

项目初始化 """ 1)根组件:App.vue <template> <div id="app"> <router-view /> </div> </template> 2)路由配置:router/index.js const routes = [ { path: '/', name: 'Home', component: Home } ]; 3)组件:views和components文件夹 i)

前端--vue框架

1.下载 查看已安装好的版本 原文地址:https://www.cnblogs.com/foremostxl/p/10328373.html

Vue 浅谈前端js框架vue

Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄 的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular 开发团队也开发了angular2.0版本,并且更名为angular,吸收了react.vue的