vue 基础(一)

vue

VUE

一. 开发工具

VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发,可用插件如下:

  • Vetur —— 语法高亮、智能感知、Emmet等

  • EsLint—— 语法纠错

  • Auto Close Tag —— 自动闭合HTML/XML标签

  • Auto Rename Tag —— 自动完成另一侧标签的同步修改

  • Path Intellisense —— 自动路劲补全

  • HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

  • Vue 2 Snippets ——vue的语法提示

二. 第一个VUE程序

2.1 引入js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

2.2 给dom元素定义id

<div id="app">

  {{msg}}

</div>

2.3 vue代码编写

new Vue({

el: "#app",

    data: {

msg: "Hello World"

}

});

二. 基本指令

v-text: v-text是用于操作纯文本,它会替代显示对应的数据对象上的值,可以简写为{{}}, 即插值表达式。

v-html: 将内容以html的形式呈现在页面。

v-model: 双向数据绑定。

v-if: 值如果为true的情况下,显示标签,如果为false会移除标签。

v-else-if: 与v-if配合使用。

v-else: 与v-if配合使用。

v-show: 如果为true,显示信息,如果为false则隐藏标签。

v-for: 循环遍历。语法形式为 v-for=“item in list”

v-bind: 将值绑定到标签的自定义属性上,形式为 v-bind:title="mytitle",可以简写为 :属性名

v-on:click: 点击事件,可以简写为@click。

如下代码为v-bind的演示:

<head>

  <style>

      .cls{

          color: red;

      }

      .cls1{

          font-size: 30px;

      }

      .cls2{

          line-height: 40px;

      }

  </style>

</head>

<body>

<div id="app">

      <p v-bind:class="{cls:isCls}">这是一段话</p>

      <p :class="[one, two, {cls:isCls}]">这是一段话</p>

      <p :title="attr">这是一段话</p>

  </div>

</body>

<script>

new Vue({

      el: "#app",

      data: {

          isCls: true,

          content: 'hello world',

          one: 'cls1',

          two: 'cls2',

          attr: '附加属性'

      }

});

</script>

案例:1. 通过表单添加数据,渲染到列表中。

2. 遍历数组和对象,并能删除和更新。

三. 计算属性与监视

3.1 计算属性

计算属性是用来存储数据,而且数据可以进行逻辑操作,是基于其依赖的进行更新,只有在相关依赖发生变化的时候才会更新变化,计算属性是缓存的,只要相关依赖不发生变化,多次访问属性值是之前I计算得到的值,并不会多次执行。计算属性的属性名不需要纳入到Vue的数据对象中。

3.2 监视器

所谓的监视器就是可以通过watch的方式观察某个属性的变化,然后做出相应的处理。

3.3 案例

FirstName: <input type="text" v-model="firstName"><br>

LastName: <input type="text" v-model="lastName"><br>

<hr>

FullName1(单向): <input type="text" v-model="fullName1"><br>

FullName2(单向): <input type="text" v-model="fullName2"><br>

FullName3(双向): <input type="text" v-model="fullName3">

对应的js代码如下:

<script>

  const vm = new Vue({

      el: '#app',

      data: {

          firstName: 'A',

          lastName: 'B',

          fullName2: ''

      },

      computed: { //计算属性

          fullName1: function(){

              //当fullName1所依赖的数据发生改变的时候, 该方法会发生变化

              return this.firstName + ' ' + this.lastName;

          },

          fullName3: {

              //当fullName1所依赖的数据发生改变的时候, 该方法会发生变化

              get(){

                  return this.firstName + ' ' + this.lastName;

              },

              //当fullName1的值发生变化的时候, 该方法被调用,value为fullName1的值

              set(value) {

                    let valArray = value.split(/\s/);

                    console.log(valArray.length);

this.firstName = valArray[0];

                    this.lastName = valArray[1];

              }

          }

      },

      watch: {

          // 第一个参数的值为新的值,第二个参数为旧的值

          firstName: function(newVal, oldVal) {

              this.fullName2 = newVal + ' ' + this.lastName;

          }

      },

  })

  vm.$watch('lastName', function(newVal, oldVal){

      this.fullName2 = this.firstName + ' ' + newVal;

  });

案例,实现如下效果:

四. 事件相关

4.1 事件修饰符

A. 阻止事件冒泡

一个盒子中嵌套另外一个盒子的时候,在内外层的盒子中都有有对应的事件行为,当点击内层盒子时候,默认情况下会触发外层盒子的事件,这种默认的行为就是事件冒泡。需要去阻止事件的冒泡。使用方法:

@click.stop="方法名"

B. 阻止事件的默认行为

对于form表单来说,当点击表单中的button的时候,会默认触发表单的提交;对于a标签,当点击a标签的时候,会触发a标签访问。那么如何去阻止a标签的默认访问行为呢,使用方法是:

@click.prevent="方法名"

4.2 按键修饰符

<input @keyup.13="showInfo" v-model="info"><br>

<input @keyup.enter="showInfo" v-model="info"><br>

new Vue({

el: '#app',

data: {

info: ''

},

methods: {

showInfo(){

alert(this.info);

}

}

})

五. 过滤器

Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式,他不能替代Vue中的methodscomputed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。不过,在Vue 2.0中已经没有内置的过滤器了,我们必须要自己来构建它们。过滤器只能用于插值表达式中。

5.1 全局过滤器

全局过滤器是只通过 Vue.filter()的方式来定义的过滤器,用这种方式定义的过滤器可以被所有的Vue实例使用。

案例一:将数字转换为美元的形式。

<div id="app">

  <p>{{price | toUSD}}</p>

</div>

<script src="./vue.js"></script>

<script>

Vue.filter('toUSD', function(value){

return '$' + value;

})

new Vue({

el: '#app',

data: {

price: 345.45

}

});

</script>

案例二:串联过滤器,将数字四舍五入成两位有效数字,然后转换为美元表达方式

<div id="app">

  <p>{{price | fix(2) | toUSD}}</p>

</div>

<script src="./vue.js"></script>

<script>

//方法的第一个参数为数据源,第二个为保留几位小数。

  Vue.filter('fix', (num, limit) => {

  return num.toFixed(limit);

  });

  //转换为美元表达方式

  Vue.filter('toUSD', function(value){

      return '$' + value;

  })

  new Vue({

      el: '#app',

      data: {

          price: 345.45

      }

  });

</script>

5.2 局部过滤器

局部过滤器是定义在Vue实例中,只能在指定的实例中才能使用。

案例:我们创建博客的时候,都会有文章列表,每篇博客将会有一个文章摘要,然后提供一个“阅读更多”的功能。我们这个示例就是来创建一个名为readMore的过滤器,它将把字符串的长度限制为给定的字符数,并将其附加到你的选择的后缀中。

<div id="app">

      <p>{{article | articleDisplay(20, '...')}}</p>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el: '#app',

data: {

article: '17日,复旦大学国际政治系副教授沈逸在接受观察者网采访时,将15日启动立法' +

'程序阻挠政府解禁华为的议员称为“杠精”和“戏精”,称其是为了在贸易问题上,' +

'加大国会在白宫面前的存在感,是美国政治的一种内斗形式,但最终,破坏的还是' +

'美国企业的利益。'

},

filters: {

// value为数据源,length表示要展示的长度,suffix为后缀

articleDisplay(value, length, suffix) {

return value.substring(0, length) + suffix;

}

}

})

</script>

练习:定义日期转换的过滤器。

六. vue-cli构建项目与打包部署

使用vue-cli能够快速的帮助我们构建项目,它就如同一个脚手架,提供了可选的模板。在使用vue-cli之前需要先安装nodejs。

6.1 使用npm构建项目

npm install -g @vue/cli             #安装vue-cli,该步骤需要等一段时间

vue -V                             #查看vue-cli的版本

vue create my-app                   #创建名为my-app的项目

6.2 项目的结构介绍

  • public: 存放静态文件。

  • src: 源码文件,开发就在此目录下。

  • .gitignore: git的配置文件。

  • babel.config.js: babel的配置文件,在创建项目的时候才用的脚手架为bable。

  • package-lock.json:定义了依赖库的下载位置,保证了在项目迁移部署环境的一致性。

  • package.json: 定义了该项目依赖的类库。

6.3 项目的打包部署

执行命令:

npm run build

将生成的dist目录下的文件放入到tomcat或者nginx下,启动服务器,即可访问。

七. 组件化开发

组件化开发是在ES6中提出的,可以提高页面的复用率,提高开发效率,便于团队协作,是一套模板化的代码,要有<template><script><style>三个标签,分别用来定义布局、脚本和样式。而且<template>下必须有一个根节点。

7.1 编写App.vue和HelloWorld.vue

HelloWorld.vue

<template> 

<div> <!-- template的根节点,是必须的 -->

<h1 class="title">{{msg}}</h1>

</div>

</template>

<script>

export default {   <!-- 向外保留成员,表示向外暴露该组件 -->

data() {

return {

msg: 'Hello World'

}

}

}

</script>

<style>

.title{

color: red;

}

</style>

App.vue

<template>

  <div>

      <p>{{article}}</p>

      <Helloworld></Helloworld> <!-- 在Helloworld.vue中的组件 -->

  </div>

</template>

<script>

/**

* 引入HelloWorld.vue组件,使用Helloworld变量来接收,接收变量的组件

* 可以叫任何名字,但是推荐使用和导入组件保持一致。

*/

import Helloworld from './components/HelloWorld.vue'

export default {

/**

    * 需要在当前组件中来定义引入的组件,接收的形式可以有二种:

    *

    * components: {HelloWorld} 最原始的写法为{Helloworld:Helloworld},第一个Helloworld

    *     在当前组件中使用的名字,可以随意更改,第二个Helloworld是上面import引入的时候用来接收的变

    *     量名。如果只写一个表示当前组件中使用的名字和变量名一致。

    */

  components: {Helloworld},

  data(){   //组件化编程必须使用定义data方法

      return {

          article: '路透社20日援引伊朗法尔斯通讯社消息称'

      };

  }

}

</script>

<style>

</style>

7.2 定义入口JS文件

import Vue from 'vue'        //引入vue

import App from './App.vue' //引入自己定义的App.vue,使用变量App来接收

new Vue({

  render: h => h(App), //将App组件渲染到index.html中。

}).$mount("#app")

render是Vue中的一个方法,方法的定义形式如下:

// render最原始的,而传入的参数createElement又是一个函数,用来生成dom结构

render: function(createElement){

   

}

// 按照ES6的箭头函数的写法,进行第一次演变

render: createElement => createElement(模板)

// 将上面的createElement变为h,那么就得到最终的形式

render: h => h(App)

$mount("#id")该方法的作用是先实例化Vue对象,接着在挂载到指定Id的节点上,和在new Vue的时候使用el指定要渲染的节点的形式是一样的,只是换了种形式而已。

以上是 vue 基础(一) 的全部内容, 来源链接: utcz.com/z/377357.html

回到顶部