首页手记 Vue.js的点点滴滴（一）

Vue.js的点点滴滴（一）

标签：

Html5 JavaScript Vue.js

一、Vue.js的概念

Vue.js是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

文档：https://cn.vuejs.org/v2/guide/

二、Vue.js的环境安装与配置

下载安装node.js，下载地址：https://nodejs.org/en/download/。详细的安装过程可以参考：https://www.runoob.com/nodejs/nodejs-install-setup.html
安装淘宝镜像，地址：https://registry.npm.taobao.org cmd窗口，输入如下命令进行安装：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装express，命令：cnpm install -g express
安装webpack，命令：cnpm install -g webpack
安装Vue，命令：cnpm install vue
安装Vue-cli，命令：cnpm install -g vue-cli

到此Vue.js所需的环境就已经搭建好了。

三、命令窗口创建第一个Vue实例

cmd命令切换到你项目所要在的目录文件中，执行命令Vue创建命令来创建你的第一个Vue实例。命令：vue init webpack vue-projectname，其中vue-projectname是你的项目名称。项目的整个创建过程如下图所示：
进入项目，启动运行项目，然后在浏览器中访问。启动命令：npm run dev，项目启动后，默认是8080端口，访问：http://localhost:8080/，将会看到：
这就是你的第一个Vue实例。

四、手动编写Vue实例

（1）引入Vue.js，两种方法：

方法一：<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

方法二：在浏览器上打开https://vuejs.org/js/vue.js网址，Ctrl+s保存为vue.js文件，在代码中引入即可

（2）编写第一个Vue实例，代码如下：

<!DOCTYPE html>
<html>
<head>
   <title>Vue入门</title>
  <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
 
<script type="text/javascript">
   /*创建vue实例*/
   new Vue({
      el: "#root",   /*el 绑定dom*/
      data: {
         msg: "Hello World"
      }
   })
</script>
</body>
</html>

说明：

（1）每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

new Vue({

// 选项（el标签，data，methods, template, components, watch, computed）

})

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

（2）{{msg}} 是Vue.js的插值表达式，它的值对应Vue实例中data属性的key。

（3）el标签：在Vue.js的实例中，用于绑定dom，称为挂载点。

（3）编写第二个Vue实例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Vue入门</title>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系-->
<!--挂载点内部的内容就是模板, 模板可以写到挂载点内部，也可以写到Vue实例内部-->
    <div id="root">
         <!-- <h1 style="color:red;">{{msg}}</h1> -->
    </div>
<script type="text/javascript">
   new Vue({
      el: "#root",  /*el:标签后面的就是挂载点*/
      template: '<h1 style="color:red;">{{msg}}</h1>',  /*模板，可以将挂载点内部的内容放到此处*/
      data : {
         msg: "Hello World"
      }
    })
</script>
</body>
</html>

说明：

(1) template: 在new Vue()实例中，用于定义模板，可以将挂载点的内容放到此处；

(2)data: 在new Vue()实例中，用于定义数据，数据可以是字符串，数字，数组列表等；

(3)在new Vue()实例中，还可以定义methods（方法）, components（组件）, watch（监听器）, computed（计算属性）等。

（4）编写第三个Vue实例，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Vue入门</title>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./vue.js"></script>
</head>
<body>
    <!--
       v-text: 会进行转译
       v-html: 不会进行转译
       v-on: 用于绑定事件,可以简写为 @
    -->
   <div id="root">
     <h1 style="color:red;">{{msg}}--{{number}}</h1>
     <h1 style="color:blue;" v-text="number"></h1>
     <h1 style="color:green;" v-html="number"></h1>
     <div v-text="content"></div>
     <br>
     <div v-html="content"></div>
     <div v-on:click="handleClick">{{msg}}</div>
   </div>
<script type="text/javascript">
   new Vue({
      el: "#root",  //绑定挂载点
      data: {   /*数据项*/
         msg: "Hello World",
         number: 123,
         content: "<h1 style='color:red;'>Hello World</h1>"
       },
      methods: {   //方法
          handleClick : function(){   //事件方法
              this.content="world"
          }
       }
   })
</script>
</body>
</html>

（5）编写第四个Vue实例，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Vue-计算属性和监听器</title>
   <meta charset="utf-8">
   <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./vue.js"></script>
</head>
<body>
<div id="root">
   姓：<input type="text" name="firstName" v-model="firstName" />
   名：<input type="text" name="lastName" v-model="lastName" />
   <div><h1 style="color:red;">您好！{{firstName}}{{lastName}},欢迎你来到Vue世界！</h1></div>
   <div><h1 style="color:green;">您好！{{fullName}},欢迎你来到Vue世界！</h1></div>
   <div style="color: blue; font-size: 40px;">计数器：{{count}}</div>
</div>
<script type="text/javascript">
  new Vue({
    el: "#root",   //挂载点
    data: {   //数据
       firstName: '',
       lastName: '',
       count: 0   //计数器
     },
    computed: {    //计算属性
       fullName : function(){
           return this.firstName + ' ' + this.lastName
        }
     },
     watch: {   //监听器
        firstName : function(){
            this.count++
        },
     lastName : function(){
        this.count++
     }
      }
   })
</script>
</body>
</html>

关于更多Vue.js的点点滴滴，后续会不断更新，感谢诸君的支持！

点击查看更多内容