Vue.js入门

Posted 黄强

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js入门相关的知识,希望对你有一定的参考价值。

引用vue.js文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>

实例:

{{ }}用于输出对象属性和函数返回值

el 获取节点

data 用于定义属性

methods 用于定义函数,可以通过return来返回函数值

<div id="app">
    <p>{{xiu}}</p>
    <p>{{kang()}}</p>
</div>
<script>
new vue({
    el: "#app";
    data: {
        xiu: "添加内容";
    },
    methods: {
        kang: function() {
            return this.xiu
        } 
    }
});

 

 

模板语法

  • 插值

文本

数据绑定最常见的形式是使用{{ }}的文本插值

<div id="app">
    <p>{{ message }}</p>
</div>

 

html

使用v-html指令用于输出HTML代码

<div id="app" v-html="xiu"></div>
<script>
new Vue({
  el: ‘#app‘,
  data: {
    xiu: ‘<h1>修抗</h1>‘
  }
})
</script>

 

属性

style>
    .xiu {
        color: red;
    }
</style>
<div id="app" v-bind:class="{‘xiu‘:xiu}"><input type="checkbox" v-model="xiu">红色</div>
<script>
new Vue({
    el: "#app",
    data: {
        xiu: true
    }
})
</script>

 

 

表达式

 

  • 指令 

参数

 

修饰符

 

  • 用户输入

 

  • 过滤器

 

  • 缩写

v-bind

 

v-on

条件语句

 

循环语句

 

计算属性

 

监听属性

 

样式绑定

 

事件处理器

 

表单

 

主键

 

自定义指令

 

路由

 

 

 

 

 

 

 

 

---恢复内容结束---

以上是关于Vue.js入门的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

Vue.js入门

Vue.js——组件快速入门(上篇)

第二节:简易安装 和 快速入门Vue.js

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

vue.js快速入门~组件入门~