vue.js的学习笔记1：vue的引入和简单使用

 

学完了springcloud后开始学习前端知识，首先学习的就是时下比较热门的js框架:vue.js。Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

1.引入vue.js

引入vue.js十分简单。只要在页面中添加vue.js的脚本文件;

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

2.将vue函数与页面模块绑定

假设html网页有一个模块：

<div id="app1">
121121
</div>

这个模块是一个简单的div模块，id是app1。

我们需要用一个vue函数来绑定这个模块，设置他的行为，

例：

<script>
    new Vue({

        el:"#app1",
        data:{

        },
        methods:{
         }

    });
</script>

 其中，el设置的参数是需要绑定的模块的id，需要绑定的模块是id为app1的模块，所以设置el:"#app1",

data设置一些和该模块交互的数据，而methods则是方法。

例如：

<div id="test">
<span>{{title}}</span>
    <input type="text" v-model="title"/>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data:{
           title:'1024'
        }
    });
</script>

 

 

 显示结果如上图所示。

其中，在app1模块中用“{{ title}}”来使用data中定义的名叫title的参数。 {{ }}可以用于输出对象属性和函数返回值。

例如： 

<div id="app1">
   <span>
       {{major}}
   </br>
   {{[0,1,2,3] [1]}}
   {{   {name:"102",age:20}.name    }}
       {{ sayHi()}}
   </span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
      el:"#app1",
    data:{
          major:"java",
    },
    methods:{
          sayHi:function () {
          alert("22222")
          }
    }


});

我们看到，在<input>标签中，还使用了v-model属性来绑定title参数。

 当我们改变文本框中的内容时，会发现参数title的值也会被改变，如下:

 

这是怎么回事呢？这就要从vue的特性和v-model的的作用说起。

Vue的核心特性之一是双向绑定，将视图和模型进行绑定, 视图改变时，模型也会改变，模型改变时，视图也会改变。

而v-model以Vue 实例的数据作为数据来源，应当在组件的 data 选项中声明初始值，之后通过监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

所以上述过程如下：input标签通过使用v-model绑定参数title，当改变文本框中的内容时，title的值也会被改变，导致title显示在页面中的值也改变。

像v-model这样的vue属性还有许多，例如：

将参数作为超链接绑定的v-bind：

<div id="test">
<a v-bind:href="link">百度</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#test',
        data:{
           link:"http://www.baidu.com",
        }
    });

 

使显示的值不变的v-once：

<p v-once>
    {{message}}
</p>

将参数作为html标签的v-html：

   <span v-html="mylink"></span>

还有绑定html事件的v-on 

<input type="text" v-on:input="changeInput" />

当文本框出现输入事件时，会触发函数changgeInput(),当函数需要传入参数时，需要写入参数。

有时，v-on:input 缩写为 @input。

有时我们想要精确的控制触发事件的行为，就需要事件修饰符：

<input type="text" @keyup.enter="mykeyup">

当选定文本框按下回车键时，会触发mukeyup方法。