vue.js入门笔记

最新推荐文章于 2025-01-22 23:23:25 发布

weixin_30527323

最新推荐文章于 2025-01-22 23:23:25 发布

阅读量128

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/xushankun/p/6415442.html

版权

vue.js入门笔记（ps：前端初级）

第一章 vue.js是什么？

Vue（法语） view（英语）

是一套构建用户界面的MVVM框架。核心库只关注视图层。并且非常容易学习。

非常容易与其它库或者已有的项目进行整合

1.1 Vue.js的目的

vue.js的产生核心是为了解决如下三个问题：

1、解决数据绑定的问题：（从angular.js人们认识到）
2、Vue.js框架产生的主要目的是为了开发大型单页面应用（SPA：Single page application ）
　　angular.js对PC端支持良好，但是对移动端支持一般。而Vue.js主要支持移动端，也支持PC端。
3、它还支持组件化。也就是可以将页面封装成若干个组件。采用积木式编程，这样使页面的复用度达到最高（支持组件化）

1.2 Vue.js特性

1.MVVM
　　M：model 业务模型，用处：处理数据，提供数据
　　V：view 用户界面、用户视图

　　业务模型model中的数据发生改变的时候，用视view也会随之变化。用户试图view改变的时候，业务模型model中的数据也可以发生改变。

2.组件化
3.指令系统
4.Vue.js2.0 开始支持虚拟DOM(Vuejs 1.0是操作的真实DOM，而不是虚拟DOM)
　　虚拟DOM可以提升页面的刷新速度。

第二章 Vue.js入门

使用Vue.js的步骤：
　　第一步：在html中引入这个Vue.js。（通过一个script的标签）

　　第二步：Vue.js提供了一个Vue,我们需要创建一个对象
　　　　　　new Vue();

　　第三步:在用户界面view中，通过{{}}形式将data中的数据显示在页面中。
　　　　　在用户界面中，{{}}中绑定的data的key（键值），而在界面中显示的是该key的value。

　　　　　 Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。
　　　　　 app这个变量会搭理vue中data数据，所以我们访问数据的时候，直接使用app.name(例子)

　　　　　如果我们要实现前后台交互，只要将从后台得到的数据放在app.data中，页面就会自动绑定，这样就实现了从model>view的数据流向。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue.js入门</title>
 6     <script src="js/vue.js"></script>
 7 </head>
 8 <body>
 9     <h1 id="demo">{{name}}，欢迎您来到Vue.js的乐园！</h1>
10 </body>
11 <script>
12     var app = new Vue({
13         el:'#demo',      //声明Vue.js管理的边界（可以是ID，类，标签名等选择器）（PS：同样的选择器，这里只会匹配第一个。。）
14         data:{           //data核心作用是存放显示在页面中的数据，需要是一个对象
15             name:'akun'
16         }
17     });
18 </script>
19 </html>

第三章 Vue.js指令

　　指令，其实指的就是vue自定义的v- 开头的自定义属性，每个不同的属性都有各自不同的意义和功能。

　　指令的语法：
　　　　v-指令名称=“表达式判断或者是业务模型中属性名或者事件名”

　　3.1 v-text
　　　　作用：操作元素中的纯文本
　　　　快捷方式：{{}} （PS：最外面的引号是vue.js的界限符号，并非字符串的引号，所以里面是字符串的时候，需要另加引号）

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js控制纯文本（上）</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <h1 id="demo" v-text="'今天是'+year+'年'+month+'月'+day+'日'"></h1>
    <script>
        new Vue({
            el:'#demo',  //vue管理的边界
            data:{
                year:new Date().getFullYear(),
                month:new Date().getMonth()+1,
                day:new Date().getDate()
            }
        });

    </script>
</body>
</html>

　示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js控制纯文本（下）</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>姓名：{{person.name}}</p>
        <p>年龄：{{person.age}}</p>
        <p>性别：{{person.sex}}</p>
    </div>
    <script>
        var app = new Vue({
            el:'#demo',
            data:{
                person:{
                    name:'xushankun',
                    sex:'男',
                    age:'25'
                }
            }
        });
        app.person.sex='男的吗';   //通过js来控制文本
        console.log(app.person.sex);
    </script>
</body>
</html>

　　3.2 v-html
　　　　作用：操作html

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js控制html</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo" v-html="msg">{{msg}}</div>
    <script>
        var app = new Vue({
            el:'#demo',
            data:{
                msg:' <img src="images/03.jpg" alt="">'
            }
        });
    </script>
</body>
</html>

　　3.3 v-bind
　　　　作用：v-bind绑定页面中的元素属性。例如：a的href属性，img的src、alt和title属性。
　　　　语法：v-bind：元素的属性名 = "data中键名"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js控制html</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <img v-bind:src="msg" alt="">
    </div>
    <script>
        var app = new Vue({
            el:'#demo',
            data:{
                msg:'images/03.jpg'
            }
        });
    </script>
</body>
</html>

　　　　在view模板中，可以使用简单的JS表达式，例如：
　　　　<p>{{num==1? '输出A' : '输出B'}}</p>

转载于:https://www.cnblogs.com/xushankun/p/6415442.html