引用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入门
原文地址:https://www.cnblogs.com/xiukang/p/8969403.html