标签：ons 表达式 eve ica div 焦点 name 冒号 过滤
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
1.语法格式如下:
var vm = new Vue({
// 选项
el : ‘#xxx‘, //Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中
data : {
name: "xx",
age : 19,
url : ‘xxxxxx‘
},// 用于定义属性
methods: { //用于定义的函数，可以通过 return 来返回函数值。
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
},
filters: { // 过滤器:
capitalize: function (value) {
if (!value) return ‘‘
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：
2. 页面上输出:
<div id="app">
<dl>
<dt>姓名</dt>
文本
<dd>{{name}}</dd> {{}}用于输出对象属性和函数返回值。
HTMl ‘<h1>菜鸟教程</h1>‘
<dd v-html="message"></dd>
属性
前提:.class1{background:red;}
vue的属性class1 : false 不会改变颜色,true会改变颜色.
<div v-bind:class="{‘class1‘:class1}"></div>
表达式:
前提:vue的属性和值有下列几个:
{
ok : true,
message : ‘ROUNOOB‘,
id : 1
}
展示:
{{5 + 5}}<br/>
{{ok ? ‘YES‘ : ‘NO‘}}
{{message.split(‘‘).reverse().join(‘‘)}}
<div v-bind:id="‘list-‘+id"></div>
指令,带有v-前缀的特殊属性,指令在用于表达式改变时,将某些行为应用到dom上.
<p v-if="seen"></p>
v-else
<div v-if="5 > 1">
</div>
<div v-else>
</div>
v-else-if
<div v-if="type === ‘A‘">A</div>
<div v-else-if="type === ‘B‘">B</div>
<div v-else-if="type === ‘C‘">C</div>
<div v-else>D</div>
v-show
<h1 v-show="ok">Hello</h1>
//循环语句: v-for指令
// {
cells : [
{‘name‘ : ‘A‘},
{‘name‘ : ‘B‘},
{‘name‘ : ‘C‘}
]
}
<li v-for="joe in cells"></li>
v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据：
{
object: {
name: ‘菜鸟教程‘,
url: ‘http://www.runoob.com‘,
slogan: ‘学的不仅是技术，更是梦想！‘
}
}
<li v-for="value in object">
{{ value }}
</li>
提供第二个的参数为键名：
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
三个参数为索引:
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
v-for 迭代整数
<li v-for="n in 10">
{{ n }}
</li>
参数,参数在指令冒号后面指明,例如v-bind指令用来响应的更新html属性.
前提:{url:‘http://www.runoob.com‘}
<a v-bind:href="url">更新</a>
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<button v-on:click="doSomething">点击我</button>
修饰符:修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
用户输入:input输入框v-model指令来实现双向绑定.
<input v-model="message" />
过滤器: Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
在两个大括号中
{{ message | capitalize }}
在 v-bind 指令中
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
过滤器可以串联: {{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数:{{ message | filterA(‘arg1‘, arg2) }}
这里，message 是第一个参数，字符串 ‘arg1‘ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
缩写:v-bind缩写
v-bind:href="url"
:href="";
v-on缩写:
v-on:click="doSomething"
@click="doSomething";
</dl>
</div>
3.提示:
3-1:当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
vm.name = ‘罗小黑‘;页面上也会随之改变.
3-2:vm.$name 多加一个$比较容易和用户普通定义的属性区分开.
4.Vue.js 组件:组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树.
注册一个全局组件语法格式如下:Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
全局组件 所有实例都能用全局组件。
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component(‘runoob‘, {
template: ‘<h1>自定义组件!</h1>‘
})
// 创建根实例
new Vue({
el: ‘#app‘
})
</script>
5.Vue.js 自定义指令:
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。
下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus‘, {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: ‘#app‘
})
</script>
6.Vue.js 路由:
Vue.js 路由
本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）.
标签：ons 表达式 eve ica div 焦点 name 冒号 过滤
原文地址：https://www.cnblogs.com/historylyt/p/9023529.html
