VUE介绍

最新推荐文章于 2024-01-12 14:38:49 发布

jing_jing95

最新推荐文章于 2024-01-12 14:38:49 发布

阅读量171

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/jing_jing95/article/details/108618417

版权

前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

一、特点

1. 应用范围广，学习成本低

2. 生态环境好：社区活跃；中文手册完整

3. 上手简单，容易使用

下载并用<script>引入，VUE会被注册为一个全局变量

<body>
    <div id="root">
        <div :style="styleObj @click="handleBtnClick">//@click也可以写作v-on:click
            Hello World!
        </div>
    </div>
</body>


<script>
    var vm  = new Vue({
        el: '#root',
        data: {
            styleObj:{
                color:"red"
            }
        },
        methods:{
            handleBtnClick:function(){
                alert("我被点击了");
            }
        }
    })
</sctipt>

4. 代码轻量

<body>
    <div id="root">
        <div @click="handleBtnClick">//@click也可以写作v-on:click
            Hello World!
        </div>
    </div>
</body>


<script>
    var vm  = new Vue({
        el: '#root',
        data: {
            message:'World Cup'//访问：vm.$data.message或vm.message
            }
        },
        methods:{
            handleBtnClick:function(){
                alert("我被点击了");
            }
        }
    })
</sctipt>

vue变量访问属性：vm.$data 以区分用户与vue本身定义的属性

:styleObj ---> 是v-bind:styleObj的省略

@是"v-on:"的缩写

5. 发展迅速

Nuxt框架：快速实现vue服务器端渲染

Weex框架：使用Vue语法，能编写原生App

6. Vue 不支持 IE8 及以下版本

二、例子

1. vue对象解读

el：区域选择器

data：

mustache语法——{{message}} 插值表达式，每个绑定都只能包含单个表达式
data数据是双向绑定，当这些数据改变时，视图会进行重渲染。只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，将不会触发任何视图的更新；如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
使用 Object.freeze()，会阻止修改现有的 property，响应系统无法再追踪变化

<body>
    <div id="root"></div>
</body>


<script>
    var root = document.getElementById('root');
    root.innerHTML = '比利时 3:2 日本';
</sctipt>

<body>
    <div id="root">
        {{message}}
    </div>
</body>


<script>
    var vm  = new Vue({
        el: '#root',
        data: {
            message:'World Cup'//用mustache语法放入页面中
            }
        },
        methods:{
            handleBtnClick:function(){
                alert("我被点击了");
            }
        }
    })
</sctipt>

2. 2秒后改变内容

<body>
    <div id="root"></div>
</body>
<script type="text/javascript">
    var root = document.getElementById('root');
    root.innerHTML= '这是2014世界杯';
    
    setTimeout(function(){
        root.innerHTML='1234556';
    },2000)
</script>

<body>
    <div id="root">
        {{message}}
    </div>
</body>


<script>
    var vm  = new Vue({
        el: '#root',
        data: {
            message:'World Cup'//用mustache语法放入页面中
            }
        },
        methods:{
            handleBtnClick:function(){
                alert("我被点击了");
            }
        }
    })
    setTimeout(function(){
        vm.$data.message = '123456';
    },2000)
</sctipt>

3. input添加到列表中

<body>
    <input v-model="inputValue" type="text" />
    <button v-on:click:"handleBtnClick">提交</button>
    <ul>
        <li v-for:"item in list">{{item}}</li>
    </ul>
</body>


<script>
    var vm  = new Vue({
        el: '#root',
        data: {
            list:[],
            inputValue:''
            }
        },
        methods:{
            handleBtnClick:function(){
                this.list.push(this.inputValue);
            }
        }
    })
</sctipt>