为了账号安全,请及时绑定邮箱和手机立即绑定

Vue.js的点点滴滴(一)

2019.05.05 00:13 1011浏览

一、Vue.js的概念

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

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

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

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

  1. 下载安装node.js,下载地址:https://nodejs.org/en/download/。详细的安装过程可以参考:https://www.runoob.com/nodejs/nodejs-install-setup.html

    https://img3.mukewang.com/5ccda67200015bb815540390.jpg

  2. 安装淘宝镜像,地址:https://registry.npm.taobao.org    cmd窗口,输入如下命令进行安装:npm install -g cnpm --registry=https://registry.npm.taobao.org

    https://img1.mukewang.com/5ccda7930001cdb913750147.jpg

  3. 安装express,命令:cnpm install -g express

    https://img2.mukewang.com/5ccda8180001279413550251.jpg

  4. 安装webpack,命令:cnpm install -g webpack

    https://img2.mukewang.com/5ccda88f0001cd8e12710290.jpg

  5. 安装Vue,命令:cnpm install vue

    https://img4.mukewang.com/5ccda8ca00017c6f07320195.jpg

  6. 安装Vue-cli,命令:cnpm install -g vue-cli

    https://img1.mukewang.com/5ccda9480001029711360345.jpg

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

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

  1. cmd命令切换到你项目所要在的目录文件中,执行命令Vue创建命令来创建你的第一个Vue实例。命令:vue init webpack vue-projectname,其中vue-projectname是你的项目名称。项目的整个创建过程如下图所示:

    https://img.mukewang.com/5ccdadcb00015d8b12230436.jpg

  2. 进入项目,启动运行项目,然后在浏览器中访问。启动命令:npm run dev,项目启动后,默认是8080端口,访问:http://localhost:8080/,将会看到:

    https://img1.mukewang.com/5ccdaf320001662109160872.jpg

    这就是你的第一个Vue实例。

四、手动编写Vue实例

(1)引入Vue.js,两种方法:

方法一:<script src="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" src="./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" src="./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" src="./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" src="./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的点点滴滴,后续会不断更新,感谢诸君的支持!

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

9人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消