一）
- vue通过实例化
语法
new Vue({
el:'',
data:"{
},
methods:{
方法名:function(){
}
}
})
el:元素id或者class或者一切能选到元素的选择器名称，
data:属性对，
methods:方法
栗子：
<div id="vue_det">
<h1>site : {{site}}</h1>
<h2>url : {{url}}</h2>
<h3>{{details()}}</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
</script>
-
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
-
Vue.js 模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1）插值：{{meg}}
2）html：v-html="msg"
3）属性：v-bind:class="{'class1':class1}"
v-bind栗子：http://www.runoob.com/try/try.php?filename=vue2-v-bind
v-bind 单向绑定；v-model 双向绑定
v-model 修饰符
.lazy 不实时监听更改数据，而是有缓存，之后更改
.number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
.trim 自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
-
条件判断 v-if
通过控制true/false来控制是否显示==插入元素
v-else-if
另外一种条件分支
.....
v-else
最后一种条件分支 -
v-show 指令来根据条件展示元素,相当于控制display:none/block
-
v-for="site in sites"
site：sites中的值，而不是key，是value；
site 中的参数（value）/ （value,key） / (value,key,index) -
计算属性关键词: computed。
computed: {
// 计算属性的 getter
方法名: function () {
//this指向 vm 实例
return this.message.split('').reverse().join('')
}
}
过滤属性关键词：filters。
filters: {
方法名: function (value) {}
} -
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性 -
watch监听
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
}) -
v-bind:class="{键值对}"
动态改变元素样式
1）绑定对象
2）绑定数组
3）三元表达式 -
v-bind:style
绑定style属性样式（也是以对象形式展现）
网友评论