0. 先下载

地址：https://cn.vuejs.org/v2/guide/installation.html
两个版本：开发版本 or 生产版本
不妨先下载 开发版本，生产版本删去了报错信息

1. 先写个轮廓

不妨将下方轮廓记为 code1

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>code1</title>

    <!-- 记得导入下载的 vue.js -->

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

    <!-- * -->

</head>

<body>

    <!-- 1 -->

    <script type="text/javascript">

        <!-- 2 -->

    </script>

</body>

</html>

2. 牛刀小试

2.1 例子 1

step1

<!-- 在 code1 的 1 处创建容器 -->

<div id="app1">

    {{msg}}

</div>

step2

// 在 code1 的 2 处创建 Vue 实例

new Vue({

    el: "#app1",	// el 是挂载点，用来挂载元素

    data: {			// 模板

        msg: "你好"

    }

});

几个概念
- 挂载点：Vue 只处理挂载点的内容
- 模板：挂载点里面的内容
- 实例：
  - new Vue()
  - 自动结合模板和数据，生成内容，将生成的内容发到挂载点

2.2 例子 2

step1

<!-- 在 code1 的 1 处，紧跟在 id="app1" 下面 -->

<div id="app2">

    {{msg}}

</div>

step2

// 在 code1 的 2 处，紧跟着上一个 Vue 实例

var vm = new Vue({

    el: "#app2",

    data: {

        msg: "数据"

    }

});

可以在控制台这样输入

> vm.msg = "姓名";

控制台会返回

<· "姓名"

与此同时，页面的第二行，原来的“数据”变为了“姓名”
- 双向绑定：模板与视图中的数据会互相影响

3. 模板语法

首先，取一个新的 code1（即，清空 code1 的 1 处与 2 处）

上例子

step1

<!-- 在 code1 的 1 处加入如下代码 -->

<div id="app">

    <p>{{msg}}</p>

    <p>{{str}}</p>

    <p>{{obj}}</p>

    <p>{{arr}}</p>

    <p>{{1+1}}</p>

    <p>{{1>0?'Y':'N'}}</p>

    <!--

    <p>{{var n = 1;}}</p>

    [Vue warn]: Error compiling template: ...

    -->

</div>

step2

// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        msg: 12,

        str: "34",

        obj: {

            name: "zhangsan",

            age: 18

        },

        arr: [5, 6, 'a', 'b']

    }

});

上例说明
- 模板中可以写的数据类型：字符串、对象、数组、简单运算
- 不能写：表达式

4. 文本指令

首先，取一个新的 code1

上例子

step1

<!-- 在 code1 的 1 处加入如下代码 -->

<div id="app">

    <p v-html="msg"></p>

    <p v-text="msg"></p>

</div>

step2

// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        msg: "<h1>你好</h1>"

    }

});

v-html 可以解析标签
v-text 不能解析标签

5. 属性操作

首先，取一个新的 code1

上例子

step1

<!-- 在 code1 的 1 处加入如下代码

vue 1 版本可以这么用，但 2 版本改了

<a href={{url}}>百度</a> -->

<!-- 完整写法 v-bind:href="url" -->

<a v-bind:href="url1">百度</a> <br>

<!-- 简写（推荐） :href="url" -->

<a :href="url2" :title="msg">博客园</a>

step2

// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        url1: "https://www.baidu.com",

        url2: "https://www.cnblogs.com",

        msg: "点我去博客园"

    }

});

v-bind:属性名=""
简写 :属性名=""

6. 样式操作

首先，取一个新的 code1

上例子

step1

<!-- 在 code1 的 * 处加入 style -->

<style type="text/css">

    .box1{

        width: 200px;

        height: 200px;

        background: red;

    }

    .box2{

        border: 3px solid green;

    }

</style>

step2

<div id="app">

    <div :class="[item1,item2]">1</div>

    <div :class="{box1:true,box2:false}">2</div>

    <div :class="{box1:flag,box2:flag}">3</div>

    <!-- 会报错

	<div v-bind:style="width:200px">4</div> -->

    <div v-bind:style="{width:'200px',height:'200px',background:'red'}">4</div>

    <div v-bind:style="{width:W,height:H,background:bg}">5</div>

    <div v-bind:style="json">6</div>

    <div v-bind:style="[json,b]">7</div>

</div>

step3

// 在 code1 的 2 处加入如下代码

new Vue({

    el: "#app",

    data: {

        item1: "box1",

        item2: "box2",

        flag: true,

        W: "200PX",

        H: "200PX",

        bg: "red",

        json: {

            width: "200px",

            height: "200px",

            background: "red"

        },

        b: {

            border: "3px solid green"

        }

    }

});

类名的操作

数组语法

v-bind:class=[变量名, 变量名]

data: {

	变量名: 类名

}

对象语法

v-bind:class={类名:true/false}

style 的操作

数组语法

:style=[obj1, obj2]

data: {

	obj1: {

		width: '200px',

		background: 'red'

	},

	obj2: {

		border: '1px solid green'

	}

}

对象语法

:style={width:w}

data: {

	w:'200px'

}

巴特西

[Web 前端] 032 vue 初识

0. 先下载

1. 先写个轮廓

2. 牛刀小试

2.1 例子 1

2.2 例子 2

3. 模板语法

上例子

4. 文本指令

上例子

5. 属性操作

上例子

6. 样式操作

上例子

类名的操作

style 的操作

最新文章

热门文章