开个坑,记录一下vue的学习过程(鬼知道这个能不能填完),前端真难

vue.js 小记1

vues是一个渐进式的javascript框架

**渐进式含义:**声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建

vue的helloworld例子

/*
Vue的基本使用步骤
	需要提供标签用于填充数据
	引入vue.js文件
	使用vue的语法做功能
	把vue提供的数据填充到标签里面
*/

    <div id="app">
        //{{}}为插值表达式,可以支持简要数值的计算,或者字符串拼接
        //{{1+2}}
        <div>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        //el代表要把数据填充到那个标签里面
        //el官方说法,元素的挂载位置
        //data 模型数据
        var vm = new Vue(
            {
                el:'#app',
                data:{
                    msg:'Hello Vue'
                }
            }
        )
    </script>

首先从vue官网下载它的js文件:https://cn.vuejs.org/js/vue.js

然后导入

<script type="text/javascript" src="js/vue.js"></script>

vue代码-->vue框架-->原生js代码

vue模板语法

vue是属于前端渲染,通过模板和数据结合,得出静态的HTML内容

前端渲染:把数据填充到HTML标签,但是通过ajax类似的技术,进行数据交互,后端只负责进行开发接口和处理数据,前端调用后端的接口,获取数据,插值到标签中

后端渲染:通过模板引擎生成html文件然后,然后将数据直接插值到html文件肿

使用指令的一个原因,是因为插值表达式的话,如果频繁刷新页面,会有出现闪动的现象

指令
/*
v-cloak该指令保持在元素上直到关联实例结束编译
v-cloak指令用法
1、提供样式
[v-cloak]{
	display:none
}
原理:先通过样式隐藏内容,然后再内存中进行值的替换,替换好再显示最后的结果
<div v-cloak>
    {{ message }}
</div>
*/
//实例代码如下:
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
<body>


    <div id="app">
        <div v-cloak>{{ msg }}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        //el代表要把数据填充到那个标签里面
        //el官方说法,元素的挂载位置
        //data 模型数据
        var vm = new Vue(
            {
                el:'#app',
                data:{
                    msg:'Hello Vue'
                }
            }
        )
    </script>
</body>
</html>

数据绑定指令

v-text填充纯文本

v-html填充html片段,比较危险,容易会造成xss攻击

v-pre填充原始的信息,例如直接带花括号的插值表达式

数据响应式

响应式:

h5中的响应式,屏幕的尺寸会影响屏幕的适配

数据的响应式, 数据的变化导致页面内容的变化

这一个过程称为数据的响应式


一个计算器例子

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
<body>
    <div id="app">
        <h1>简单计算器</h1>
        <div>
            <span>数值A:</span>
            <input type="text" v-model='a'>
        </div>
        <div>
            <span>数值B:</span>
            <input type="text" v-model='b'>
        </div>
        <div>
            <button v-on:click="handle">计算</button>
        </div>
        <div>
            <span>计算结果:</span>
            <span v-text='result'></span>
        </div>
    </div>
    
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            a:'',
            b:'',
            result:''
        },
        methods:{
            handle:function(){
                //计算逻辑
                this.result=parseInt(this.a)+parseInt(this.b);
            }
        }
    })
    </script>
</body>
</html>