vue2.0学习记录

陈暖秋
167 阅读3分钟

前言：作为一个刚入职场的新人，需要不断学习积累知识，加上在公司也正在使用 vue进行项目开发，之前看过vue的官方文档，对vue有了一定的认识和了解，但是并不全面，所以想找个教程再系统的学习 一下 vue，此文主要是自己的学习记录。另外附上我所学习的教程博客链接jspang.com/

第一节、vue实例helloworld

  1. 首先需要去vue官网下载vue。 vue官网

image.png 2. 然后手动创建一个vue项目。 最终的目录结构如下：

image.png 将下载下来的vue放到assets/js目录下。 然后编写index.html作为主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js实例</title>
</head>
<body>
    <h1>vue实例</h1>
    <ol>
        <li><a href="./example/helloworld.html">hello world</a></li>
    </ol>
</body>
</html>
  1. 然后需要启动项目，需要安装live-server服务（一个开发级的具有实时加载功能的小型服务器） 使用npm全局安装：

npm install -g live-server

然后在项目目录终端中输入live-server,就可以在浏览器看到效果了。

在安装live-server时遇到的问题：live-server : 无法加载文件 C:\Users\codeyu\AppData\Roaming\npm\live-server.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https: /go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 解决办法： image.png

  1. 然后编写helloworld.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "hello world"
            }

        })
    </script>
</body>
</html>

第二节：vue指令

v-if、v-else、v-show

v-if：可以实现条件渲染，vue根据表达式值的真假来渲染元素。例如：模拟登录操作，属性isLogin为true时，渲染，否则不会渲染这个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <div id="app">
        <!-- <div v-if="isLogin">你好，codeyu</div>
        <div v-else="isLogin">请先登录</div> -->
        <div v-show="isLogin">你好，codeyu，this is show</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isLogin: false
            }

        })
    </script>
</body>
</html>

v-show：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好，codeyu</div>

v-if和v-show的区别：

  • v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。有更高的切换开销。
  • v-show：调整css dispaly属性，可以使客户端操作更加流畅。有更高的初始渲染开销。 因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。

v-text

v-text主要用来更新textContent，可以等同于JS的text属性。

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

这两者等价：

<span>{{msg}}</span>

v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

<div v-html="rawHtml"></div>

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

<div id="app">
    <span v-pre>{{message}}</span>  //这条语句不进行编译    
    <span>{{message}}</span>
</div>

最终仅显示第二个span的内容。

v-for

用v-for指令根据遍历数组来进行渲染 有下面两种遍历形式

<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。

<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}    </li></ul><script type="text/javascript">
    var example = new Vue({
      el:'#app',
      data:{
        parent:'父作用域'
        items:[
          {text:'文本1'},
          {text:'文本2'}
        ]
      }
    })</script>

会被渲染为：

<ul id="app">
    <li>父作用域-文本1</li>
    <li>父作用域-文本2</li></ul>

注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

avatar
文章
阅读
粉丝