Vue2 学习记录
vue 代码都是从这段开始.
var vm = new Vue({ 属性 })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var vm = new Vue({ el: '#idName', //需要渲染的对象 data: { //标准的json数据格式 msg: 'HelloWorld', info: { name: '张三', value: '著名人士' }, list: [ { key: 1, val: 'C#' }, { key: 2, val: 'java' }, ], htmlraw:'<div>原生html内容</div>', counter:1 }, methods: { //自定义方法 onefun: function() { return this.msg.toUpperCase() }, }, computed: { //自定义方法计算属性 twofun: function() { //通常简写 return this.msg.toUpperCase() }, threefun: { //完整写法 get: function() { return this.msg.toUpperCase() }, set: function(v) { this.msg = v }, }, }, filters: { fourfun: function(v) { //数据展示前的过滤方法,参数 v 是固定的隐性参数,调用方法的时候我们不用管它,它会自己传 return v.toUpperCase() }, }, watch: { counter: function(val) { this.msg = val.toUpperCase();// 对counter值监听 }, } }) vm.msg = '今天天气不错' //可以通过vm对象对data中的数据进行操作 vm.$watch('counter', function(nval, oval) {console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});// 这是一个新监听,也就是说counter现在有两个监听<div id="idName">
<input type="text" v-model:value="msg"/>//将msg绑定到输入框
<div>{{ twofun }}</div>
<div>{{ threefun('第三个方法') }}</div>
<button type="button" v-on:click="onefun"></button>//msg值变大写字母
<div v-if="info.name == '张四'">我不会显示</div>
<div v-else-if="info.name == '张五'">我还是不会显示</div>
<div v-else>我会显示</div>
<div v-for="item in list"v-bind:id="'div-'+item.key">{{item.val}}</div>//循环渲染数据集
<div v-for="item in info">{{item}}</div>//循环读取对象属性值
<div v-for="(v,k,i) in info">{{k}}-{{v}}-{{i}}</div>//循环读取对象,属性名,属性值,下角标
<div v-html="htmlraw"></div>
<button @click = "counter++">计数器</button>
</div>
这些自定义属性就是用来渲染页面的
1.el 渲染对象
应该就是 elemet ,表示 html 的标签元素,id(#idName)、class(.className)、标签(div) 都有效,这里的用法和 jquery 没有区别,用途就是告诉 vue 要渲染的对象是谁
2.data 数据集
就是字面上的意思传数据的,比如 data 下有一个{ msg: 'star' } 的属性,页面有一个 {{ msg }} 代码,那么渲染的时候,vue 会自动从 data 中找到 msg 属性来替换 {{ msg }} ,打开的页面就会显示 star 了
3.methods 自定义方法
写过 js、jquery 的都经常用到 vue 也不例外,比如 methods 中定义了一个 { onefun: function(){ this.msg = 'success'; } } 的方法,页面上有一个按钮,通过 v-on:click="onefun" 绑定我们自定义的方法,点击这个按钮就会触发我们写的这个方法了,当然在页面直接输出 {{ onefun() }} 可以。(ps:前面我们页面上显示的 star 就会变成 success ,这是 vue 的一个特点,自动更新渲染)
3.computed 计算属性
本质上就是前面的 methods 的专用版,比如 computed 中定义了一个{ twofun: function(){ return this.msg.toString().toUpperCase(); } }的方法,然后在页面输出 {{ twofun }} ,那么每当 msg 的值发生变化,都会调用这个方法把小写字母转成大写并重新渲染显示,其实这个方法的完整写法应该是
twofun: { get: function(){ return this.msg.toString().toUpperCase(); }, set: function(v){ this.msg = v; } }
是不是发现这玩意儿好眼熟啊,这不就是我们编程里自定义属性的 get;set; 吗?没错就是它!
ps:computed 和 methods 在功能上来看其实没有区别,唯一区别在于 computed 是基于它的依赖缓存,换句话叫敌不动我不动,那性能肯定比 methods 每次都动要高,尤其是大量数据的时候。
4.filters 过滤器
本质上也是前面的 methods 的专用版。一般用于数据展示前做一些自定义渲染处理,比如前面示例中的 {{ msg }} 改成 {{ msg | bigbig }},然后在 filters 中定义一个叫 bigbig: function(v){ return v.toString().toUpperCase(); } 的函数,那么页面显示的时候就不会是 star 而是 STAR 。过滤器可以同时绑定多个,除了默认传的值以外,还可以像正常调用 js 方法一样,传其他参数,或者回调函数
5.watch 监听
data 中的属性名就是这里的方法名,当通过 v-model 绑定的值发生变化就会触发监听
watch : { msg:function(nval, oval) { //do something } }
还可以通过 vm.$watch('msg', function(nval, oval) {do something}); 增加监听
html 标签元素中动态绑定.
(ps:在绑定中我们依然可以通过加上 |过滤器方法名 的方式为绑定内容进行处理)
1. v-on:click 通常用简写 @click 动态绑定点击事件,v-on 可以给html现有的事件绑定方法,同时还提供了事件修饰符来辅助,一个绑定同时可以使用多个修饰符,使用修饰符时顺序很重要;相应的代码会以同样的顺序产生。如果发现跟预期不符,那么检查一下是不是顺序有问题。修饰符的具体用途,可以查看官方文档
2. v-bind:id 为标签元素的属性动态绑定值,不止 id 属性,什么 class、style、标签元素有的属性都能绑,href 属性绑定简写 :href,例如:v-bind:class="{ 'class1': fun1(), 'class2': fun2() }" 我们还可以在绑定的时候调用方法,如示例如果方法返回 true 则使用这个样式,false 不使用,甚至还可以在 data 设定一个属性 abc: { class1: true, class2: false },v-bind:class="abc" 的方式来设置样式
3. v-html 将动态绑定值以html格式展示,比如我前面的 msg 属性值现在是 '<p>这是演示代码</p>',给一个 div 标签绑定 v-html=msg ,那么页面html代码会展示<div><p>这是演示代码</p></div>
4. v-model 双向绑定,通常用于表单标签,比如 input、select、textarea、checkbox、radio 这些,可以绑定 data 中的属性,当用户进行操作的时候,进行改变的值进行重新渲染,比如场景:左边用户输入内容,右边预览对实际显示效果进行实时渲染。
v-model 有【.lazy、.number、.trim】修饰符,第一个是将实时同步转成 change 后同步,第二个是数字格式,第三是自动去空
5. v-if 通过判断,决定是否对这个标签进行渲染输出,当然它也有配套的 v-else、v-else-if 。v-if 的条件和正常写 js 一样,但不能使用 filters,但是可以使用 methods
6. v-show 和 jquery 的 .show()、.hide()有点像,通过 绑定的值或方法返回值 是 true 或 false 来控制标签的显示隐藏
7. v-for ,可以遍历 array ,可以遍历 object 属性,还可以遍历整数!
v-for="site in sites",通过遍历 data 中 sites 集合,然后就可以通过 {{ site.属性名 }} 来输出值了。
v-for="site in sites",通过遍历 data 中 sites 对象,然后就可以通过 {{ site }} 来输出 sites 对象的所有属性的值了。
v-for="(value, key, index) in sites",通过遍历 data 中 sites 对象,然后就可以通过 {{ value }} {{ key }} {{ index }} 对象的所有属性信息了。ps:index 是可选的参数
v-for="n in 10",通过整数,然后就可以通过 {{ n }} 输出 1-10 十个整数