zoukankan      html  css  js  c++  java
  • Vue框架初识

    Vue框架

    三大主流前端框架:Angular React Vue

    Vue:JS渐进式框架:一个页面小到一个变量,大到整个页面,均可以由vue控制,vue也可以控制整个项目

    学习曲线:vue的指令 vue的实例成员 vue组件 vue项目开发

    Vue的优点

    1. 单页面:高效

    2. 虚拟DOM:页面缓存

    3. 数据的双向绑定:数据是具有监听机制的

    4. 数据驱动:从数据出发,而不是从COM出发

    Vue的使用

    1. 下载vue.js:https://vuejs.org/js/vue.js

    2. 在要使用vue的html页面通过script标签引入

    3. 在html中书写挂载点的页面结构,用id表示

    4. 在自定义的script标签实例化Vue对象,传入一个大字典

    5. 在字典中通过 el与挂载点页面结构绑定,data为其通过数据

    Vue初识

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>vue初识</title>
    </head>
    <body>
    <div id="app">
        <!-- {{ vue变量 }} 插值表达式,不传值会报错 -->
        <h1>{{ h1_msg }}</h1> 
        <h2>{{ h2_msg }}</h2>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',  // 挂载点
            data: {  // 为挂载点的页面结构提供数据
                h1_msg: 'h1的内容',
                h2_msg: 'h2的内容',
            }
        })
    </script>
    </html>
    

    Vue完成简单的事件

    <div id='app'>
        <h1 v-on:click='clickAction'>h1的内容是{{ msg }}</h1>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'vue渲染的内容'
            },
            methods:{ // 为挂载点提供事件函数
            clickAction: function(){
            	alert(123)
        		}
        	}
        })
    </script>
    

    Vue操作简单样式

    <div id="app">
        <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
        <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                v_style: {
                    color: 'black'
                }
            },
            methods: {
                btnClick: function () {
                    this.v_style.color = 'green'
                }
            }
        })
    </script>
    

    小结

    1. Vue通过v-* 指令来控制标签
    2. Vue通过 变量 来驱动页面
  • 相关阅读:
    前端-【学习心得】-node使用杂谈
    前端-【学习心得】-自己定义一个触摸函数
    前端-【学习心得】-模板渲染的简单方法
    [iOS]NSArray求最大值最小值平均值和的快速方法
    ARC与MRC的混用
    [转]让Xcode的控制台支持LLDB类型的打印
    [iOS]将图片保存到本地相册
    [iOS]深度遍历view的subview
    [转]NSAssert的使用
    [封装]iOS获取设备唯一标识
  • 原文地址:https://www.cnblogs.com/majingjie/p/11090736.html
Copyright © 2011-2022 走看看