这里写目录标题

Vue.js学习·从入门到项目实践(一)
- Vue.js安装
- Vue.js内置指令
- - V-bind
  - V-model
  - V-for
  - V-on
  - V-html
  - V-text
  - V-cloak
  - V-once
  - V-show

Vue.js学习·从入门到项目实践(一)

本篇文章是关于Vue.js的第一次学习，主要讲解下Vue.js的使用安装和常用的内置指令。

Vue.js安装

vue.js官网
官网为我们提供了三种安装方式，但是在开发学习之初我们使用第一种直接直接用 script 引入的方式。
将vue.js放入项目js目录，并在页面中引入即可。
在这里插入图片描述

 <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>

下面我们创建一个Vue实例，Hello Vue!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="demo">
{
   
   {message}}
</div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#demo',
        data:{
     
     
            message: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

在这里插入图片描述

Vue.js内置指令

V-bind

绑定属性，动态更新HTML元素上的属性
DOM节点的属性基本都可以用指令v-bind进行绑定：
V-bind:href
V-bind:class
V-bind:title
属性也可以绑定变量、表达式、执行函数等内容，不过最终的结果都应该满足属性自身的约束。
练习
利用Vue.js设置一个超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bindLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">点击</a>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            url: 'https://www.baidu.com'
        }
    })
</script>
</body>
</html>

V-model

v-model和v-show是Vue核心功能中内置的、开发者不可自定义的指令。我们可以使用v-model为可输入元素（input&textarea）创建双向数据绑定，它会根据元素类型自动选取正确的方法来更新元素。

数据双向绑定，用于表单输入。

Vue允许开发者将v-model用于自定义组件。

在自定义组件中，value属性和input事件尤为重要，它们分别负责不同方向的数据传递。value属性用于接收外部传入的值以更新组件内部的状态；input事件由开发者决定在什么时候调用，并负责将组件内部的状态同步到外部。
练习
利用Vue.js，在输入框输入文字，并在下面显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-modelLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <input v-model="message" placeholder="edit">
        <p>Message is:{
   
   {message}}</p>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            message: 'it聚慕课'
        }
    })
</script>
</body>
</html>

V-for

练习
利用Vue.js，将数组或者json数据在页面中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-forLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li v-for="value in json">
                {
   
   {value}}
            </li>
        </ol>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            arr: ['苹果', '梨子', '橘子', '芒果'],
            json:{
     
     a:'丽丽',b:'小明',c:'小红'}
        }
    })
</script>
</body>
</html>

V-on

Vue使用v-on指令监听DOM事件，开发者可以将事件代码通过v-on指令绑定到DOM节点上
Vue也为v-on提供了一种简写形式@，代码如下：
<button @click=“logInfo()”>打印消息(default: Hello World)

实际上，写法的不同只是为了避免混淆和冲突，事件绑定的主要作用在于降低了学习和开发的成本，总结了以下两点：
解决了不同浏览器的兼容问题。
提供了语法糖——事件绑定修饰符。

练习
创建两个按钮，其中一个利用原生js,一个利用Vue.js，并触发点击弹窗事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-onLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点击1" onclick="alert(1)" />
        <input type="button" value="点击2" v-on:click="show()" />

    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
        },
        methods:{
     
     
            show:function () {
     
      //方法命名方式
                alert(1);
            }
        }
    })
</script>
</body>
</html>

V-html

练习
利用Vue.js，向页面嵌入HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-htmlLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app" v-html="msg"></div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            msg:'<h1>欢迎光临</h1>'
        }

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

V-text

练习
利用Vue.js中的函数向页面嵌入年月日文本数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-textLearn</title>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app" v-text="'今年是'+year+'年'+month+'月'"></div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            year:new Date().getFullYear(),
            month:new Date().getMonth()+1
        }
    });
</script>
</body>
</html>

V-cloak

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
练习
利用Vue.js中的内置指令V-cloak解决网络较慢的缓冲问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloakLearn</title>
    <style type="text/css">
        [v-cloak]{
     
     
            display: none;
        }
    </style>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <span>
            {
   
   {message}}
        </span>
        <span v-cloak>{
   
   {message}}</span>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            message:'Hello Vue'
        }
    });
</script>
</body>
</html>

V-once

v-once在日常开发中用的很多

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

下面示例：
当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-onceLearn</title>
    <style type="text/css">
        [v-cloak]{
     
     
            display: none;
        }
    </style>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <p v-once>{
   
   {msg}}</p> <!--msg不会改变-->
        <p>{
   
   {msg}}</p>
        <p>
            <input type="text" v-model="msg" name="">
        </p>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            msg:'hello'
        }
    });
</script>
</body>
</html>

V-show

v-show指令，等于true的时候显示，false的时候隐藏
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-showLearn</title>
    <style type="text/css">
        [v-cloak]{
     
     
            display: none;
        }
    </style>
    <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">
        <p v-show="type==='科技'">哈哈哈哈</p>
    </div>
<script type="text/javascript">
    var vm = new Vue({
     
     
        el:'#app',
        data:{
     
     
            type:'科技'
        }
    });
</script>
</body>
</html>

在这里插入图片描述