Hellom's Studio.

vue基础

vue
字数统计: 1.8k阅读时长: 9 min
2020/03/23 Share

第一个vue应用

vue官网文档：Vue

  • head中引入 CDN 即可完成一个简单的 vue 应用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
e.g.
<head>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>

<div class="bg">
    hello world!
    {{msg}}
</div>

 <script>

    new Vue({
        el:'.bg',
        data:{
            msg:'hello vue!'
        }
    })

</script>

模板语法

  • 使用插值表达式将数据渲染到 DOM 里

  • 常用的 vue 的指令：

    • v-bind：给DOM绑定元素属性 ==> v-bind:href='url' 可简写为 :href="url"

    • v-html: 可解析HTML并渲染在页面上

    • v-text: 不能解析HTML，只能绑定一段文本内容

    • v-on:click：绑定一个 click 事件 ==> v-on:click="submit()" 可简写为 @click="submit()"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
e.g.

 <div id="app">

    <!-- 插值表达式 可以进行一些简单的运算操作-->
    <div>{{count}}</div>
    <div> {{(count + 1) * 10}}</div>

    <!-- v-bind -->
    <a v-bind:href="url">百度</a>
    <a :href="url">慕课网</a>

    <!-- v-html  -->
    <div v-html="template"></div>
    <div v-text="template"></div>

    <!-- v-on:click -->
    <button type="button" v-on:click="submit()">加数字</button>
    <button type="button" @click="submit()">加数字</button>
</div>


<script>
    new Vue({
        el: '#app',  // vue实例与div的DOM元素做了绑定
        data: {      // 绑定的数据
            msg: 'hello vue!',
            count: 0,
            url: 'http://www.baidu.com',
            url1: "http://www.imooc.com",
            template: '<div>hello template</div>'
        },
        methods: {   // 绑定的方法
            submit() {
                this.count++;
            }
        }
    })
</script>

计算属性与侦听器

  • computed：计算属性

    • 可以监听多个变量，但是变量必须是实例中的变量

    • 根据实例中的值变化，数据联动

  • watch：侦听器

    • 监听一个变量的变化

    • 需要在数据变化时执行异步或开销较大的操作时使用

1
2
3
4
5
6
e.g.

 <div id="app">
    {{msg}}
    <div>{{msg1}}</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
e.g

var string = '111'; // 实例以外的值

var app = new Vue({
    el: '#app',
    data: {
        msg: 'hello vue!',
        another:'another hello vue!'
    },
    watch: { // 侦听器

        msg(newVal, oldVal) {
            console.log(`new: ${newVal}`);
            console.log(`old: ${oldVal}`);
        }

    },
    computed: { // 计算属性
        msg1(){
            return `computed: ${this.msg}. another: ${this.another},${string}`
        }
    }
})

    // 实例测试
    app.msg = '修改 msg 这个值';
    msg();  
    /* 
    new: 修改 msg 这个值
    old: hello vue!
    */

    msg1(); // computed: 修改 msg 这个值. another: another hello vue!,111

条件渲染

  • v-if

  • v-else,v-else-if

  • v-show

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
    {{msg}}
    <div v-if="count > 0">
        判断1：count大于0的话，count的值为 {{count}}
    </div>
    <div v-else-if="count < 0 && count > -5">
        判断2：count的值为 {{count}}
    </div>
    <div v-else>
        判断3：count的值为 {{count}}
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!',
            count: 0
        }
    })

    // 实例测试
    app.count = -1; // 判断2：count的值为 -1
    app.count = 3;  // 判断1：count大于0的话，count的值为 3
</script>

列表渲染

  • v-for
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="app">
    {{msg}}
    <div v-for="item in list">
        <div v-if="item.age > 29">
            {{item.name}}
        </div>
    </div>
    
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!',
            count: 0,
            list: [{
                name: '李伟',
                age: 29
            }, {
                name: '张三',
                age: 30
            }]
        }
    })
</script>

Class 与 Style 绑定

Class的使用方式

  • 使用数组 
1
2
3
4
5
6
7
8
9
10
11
<style>
    .add {
        color: red;
    }

    .other {
        font-weight: 500;
    }
</style>

<div :class="['add','other']"></div>
  • 在数组中使用三元表达式
1
<div :class="['add','other',isactive?'active':'']"></div>
  • 在数组中嵌套对象
1
<div :class="['add','other',{'active':isactive}]"></div>
  • 直接使用对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
    <!-- 这种写法不太优雅 -->
    <div :class="{add: true ,other: true, isactive: true}"></div>

    <!-- 官方推荐使用定义一个对象 -->
    <div :class="classObj"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!',
            count: 0,
           classObj:{
               add: true,
               other: true,
               isactive: true
           }
        }
    })
</script>

Style的使用方式

  • 使用对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
    <div :style="styleObj"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!',
            count: 0,
            styleObj: {
                color: 'red',
                fontSize: '20px'
            }
        }
    })
</script>
  • 使用数组语法
1
2
3
<div id="app">
    <div :style="[styleObj,baseStyle]"></div>
</div>

vue核心技术

vue-cli

安装：

  • npm install -g @vue/cli

创建项目：

  • 构建工程项目的两种方式

    • 使用命令行：vue create hello-vue

    • 使用图形化界面：vue ui

vue-router

vuex

作用：

  • 为Vue.js开发的状态管理模式

  • 组件状态集中管理

  • 组件状态的改变遵循统一的规则

栗子：

Add.vue 页面新增数据，提交给 store， list.vue页面再从 store 中获取数据渲染页面。

通过 store.commit() 方法把数据提交给 store 中的 lists

其中 commit (type, payload, options) 接收三个参数：

  • type：mutation 类型

  • payload：有效载荷

  • options：配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- Add.vue -->
<div>
    <p>标题：</p>
    <input
      type="text"
      v-model="title"
    >
    <p>内容：</p>
    <input
      type="text"
      v-model="content"
    >
    <div>
      <button
        type="button"
        @click="add()"
      >添加</button>
    </div>
</div>
<script>
import store from '@/store'  // 引入 store
export default {
  name: 'add',
  store,
  data () {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    add () {
      store.commit('addItem', {
        title: this.title,
        content: this.content
      })
      this.title = ''
      this.content = ''
      this.$router.push('/home/list')
    }
  },
  components: {}
}
</script>

通过 store 中的 state 管理 lists 的状态

再通过 mutations 方法来处理需要改变的数据

addItem(state, value) 接收两个参数：

  • state：获取状态里的值

  • value： 获取添加后内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// store.js

export default new Vuex.Store({
  state: {
    lists: []
  },
  mutations: {
    addItem (state, value) {
      state.lists.push(value)
    }
  },
  actions: {},
  modules: {}
})

再获取 store 中 lists 的值 对 list.vue 页面进行数据渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- list.vue -->
<div>
    <ul>
      <li v-for="(item,index) in pageLists" :key="index">{{item.title}} - {{item.content}}</li>
    </ul>
  </div>

  <script>
import store from '@/store'  // 引入 store
export default {
  name: 'list',
  store, 
  data () {
    return {

    }
  },
  components: {

  },
  computed: {
    pageLists () {
      return store.state.lists  // 获取 store 中 lists 的值
    }
  }
}
</script>

使用 vscode 创建 vue 模板

  • 打开 vscode，选择 文件 ==> 首选项 ==> 用户代码片段

  • 在弹框中输入 vue.json

  • 然后把以下代码复制到 vue.json 中即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			" <div>\n",
			" </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"  name: '${1:component_name}',",
			"  data () {",
			"    return {\n",
			"    }",
			"  },",
			"  components: {\n",
			"  }",
			"}",
			"</script>\n",
			"<style  lang=\"${2:scss}\" scoped>\n",
			"</style>",
			""

		],
		"description": "Log output to console"
	}
}

vscode 实现 vue 代码格式化配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"vetur.format.defaultFormatterOptions": {
   "js-beautify-html": {
     "wrap_attributes": "force-expand-multiline"
   },
   "prettyhtml": {
     "printWidth": 100,
     "singleQuote": true,
     "wrapAttributes": false,
     "sortAttributes": false
   }
 },
 "prettier.semi": false,  // 去掉代码结尾的分号
 "prettier.singleQuote": true,  // 使用单引号替代双引号
 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
 "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,//让函数(名)和后面的括号之间加个空格
CATALOG
  1. 1. 第一个vue应用
  2. 2. 模板语法
  3. 3. 计算属性与侦听器
  4. 4. 条件渲染
  5. 5. 列表渲染
  6. 6. Class 与 Style 绑定
    1. 6.1. Class的使用方式
    2. 6.2. Style的使用方式
  7. 7. vue核心技术
    1. 7.1. vue-cli
    2. 7.2. vue-router
    3. 7.3. vuex
      1. 7.3.1. 作用：
      2. 7.3.2. 栗子：
  8. 8. 使用 vscode 创建 vue 模板
  9. 9. vscode 实现 vue 代码格式化配置项
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue