.static{ border-radius:4px; } .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; }
<div id="div1"> {{message}} </div> <div id="div2" v-bind:class="{'class1':use}"><!-- 属性绑定--> <p>url:{{url}}</p> <!-- 文本的绑定--> <p>site:{{site}}</p> <p>{{name}}</p> <p>{{details()}}</p> <!--方法--> <p v-html="htmlcode"></p> <!--html代码--> <p> {{message.split('').reverse().join('')}} <!--表达式--> <br> <span v-bind:id="'idList'+id">spanid</span> <!--属性绑定--> </p> <p v-if="seen">you see me now</p> <a v-on:click="dosomeThing" href="#">v-on</a> <p> <a href="https://www.baidu.com" target="_blank" v-on:click.prevent>修饰符.</a></p><!--.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()--> <p> <input type="text" v-model="message"> </p> <div v-bind:id="rawId | formatId">{{rawId | formatId}}</div> <!-- 过滤器，由"管道符"指示--> <p v-if="type == 'A'">A</p> <!--条件判断--> <p v-else-if="type == 'B'">B</p> <p v-else-if="type == 'C'">C</p> <p v-else>not A/B/C</p> <h1 v-show="isShow">Hello!</h1> <ol><!--循环简单数组--> <ul v-for="(site,index) in sites"> <!--第一个参数是数组值，第二个参数是索引，可以不要索引--> {{index}}: {{ site}} </ul> </ol> <ol><!--循环对象数组--> <ul v-for="(site,index) in sites1"> {{index}}: {{ site.name }} </ul> </ol> <ul><!--在模板中循环--> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul> <ol> <ul v-for="(site,index) in sites1"> {{index}}: <span v-for="(value,key,i) in site" :prop1="value"> <!--内循环，遍历对象属性，第一个参数是属性值，第二个参数是属性名，第三个参数是索引，可以只有第一个参数--> {{i}}:{{key}}:{{value}}>>> </span> </ul> </ol> <ul> <!--可以遍历整数--> <li v-for="n in 10"> {{ n }} </li> </ul> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> <p>使用方法后反转字符串: {{ reversedMessage2() }}</p> <p>使用方法后反转字符串: {{ reversedMessage2() }}</p> <div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> <!--样式绑定，设置直接对象--> <br> <div v-bind:class="classObject"></div> <!--样式绑定，设置vue数据中的对象--> <br> <div v-bind:class="classObject1"></div> <!--样式绑定，绑定返回对象的计算属性--> <br> <div v-bind:class="[activeClass, errorClass]"></div> <!--样式绑定，设置数组，字符串做下标索引--> <br> <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div><!----> <br> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">杭州星迈科技有限公司</div><!--直接设置样式--> <div v-bind:style="styleObject">杭州星迈科技有限公司</div><!--直接绑定到一个样式对象--><!----> <div v-bind:style="[baseStyles, overridingStyles]">杭州星迈科技有限公司</div><!--使用数组将多个样式对象应用到一个元素上--> <!----> <button v-on:click="say('what')">Say what</button><!--用内联 JavaScript 语句--> <!--事件修饰符，通过由点(.)表示的指令后缀来调用修饰符--> <a v-on:click.stop="doThis"></a><!-- 阻止单击事件冒泡 --> <form v-on:submit.prevent="onSubmit"></form><!-- 提交事件不再重载页面 --> <a v-on:click.stop.prevent="doThat"></a><!-- 修饰符可以串联 --> <form v-on:submit.prevent></form><!-- 只有修饰符 --> <div v-on:click.capture="doThis">...</div><!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.self="doThat">...</div><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <a v-on:click.once="doThis"></a><!-- click 事件只能点击一次，2.1.4版本新增 --> <!--按键修饰符，监听键盘事件--> <input v-on:keyup.13="submit"><!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"><!-- 缩写语法 --> <!--表单元素--> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> <p>单个复选框：</p><!--是一个为逻辑值，如果是多个则绑定到同一个数组--> <input type="checkbox" id="checkbox" v-model="checked"> <input type="checkbox" id="checkbox1" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <span>选择的值为: {{ checkedNames }}</span> <!--单选框--> <input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>选中值为: {{ picked }}</span> <!--下拉菜单--> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div>
var div1 = new Vue({ el:"#div1", data:{ message:"div1 messgae" } }); var cnt=0; var div2 = new Vue({ el:'#div2', // data:{ site:"杭州星迈科技有限公司", name:"杭州星迈科技有限公司", url:"www.sensomics.cn", use:true, htmlcode:"<h1>hello h1</h1>", message:"hello express", id:2, seen:true, rawId:"mess" isShow:true, sites: [ 'Runoob', 'Google', 'Taobao' ], sites1: [ { name: 'Runoob',url:"www.runoob.com" }, { name: 'Google',url:"www.google.com" }, { name: 'Taobao',url:"www.taobao.com" } ], kilometers : 0, meters:0, isActive: true, hasError: true, classObject: { active: true, 'text-danger': true }, activeClass: 'active', errorClass: 'text-danger'， error: { value: true, type: 'fatal' }, activeColor: 'green', fontSize: 30， baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold', fontSize:'40px' }, message2:"helj", checked : false, checkedNames: [], picked: 'Runoob', selected: '' }, methods:{ details: function(){ return this.site + "是一个基因数据分析公司" }, dosomeThing:function(){ alert("v-on,监听事件"); div1.$data.message = "message from a in div2"; }, reversedMessage2: function () { cnt+=1; return cnt+this.message.split('').reverse().join(''); }, say: function (message) { alert(message); } }, filters:{ //过滤器 formatId:function(value){ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }, computed: { /** cnt 是独立于 vue 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值， 以后再使用 reversedMessage 这个计算属性，因为 vue 对象没有发生改变，于是界面渲染就直接用这个值， 不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样 */ reversedMessage: function () { // 计算属性的 getter cnt+=1; return cnt+this.message.split('').reverse().join(''); }, company: { get: function () { // getter return this.name + ' ' + this.url }, set: function (newValue) { // setter var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } }, classObject1: function () { return { base: true, active: this.isActive && !this.error.value, 'text-danger': this.error.value && this.error.type === 'fatal', } } }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); div2.company = 'baidu https://www.baidu.com'; 调用 setter， div2.name 和 div2.url 也会被对应更新 div2.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; });
DOM绑定
dom文本插值："{{message}}"
dom元素属性绑定：v-bind
dom innerhtml代码输出：v-html
dom 内表达式 {{expression}}
dom元素属性绑定：v-bind
dom innerhtml代码输出：v-html
dom 内表达式 {{expression}}
带v-前缀的属性是指令,在指令后的冒号后面跟着的是‘参数’
v-bind:
v-html:
v-if: 将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-on: 事件监听
v-model：用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-bind:
v-html:
v-if: 将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
v-on: 事件监听
v-model：用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来,div1.$data.message = "message from a in div2";
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示
过滤器可以串联：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
过滤器可以串联：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
Vue.js 为两个最为常用的指令提供了特别的缩写：
!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
条件判断：v-if v-else-if v-else,根据表达式的值来决定是否插入dom元素， v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show,根据条件决定是否显示dom元素
for循环 v-for：可以循环数组，和对象, v-for="v in vs"
computed计算属性：methods 和 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖（vue实例对象属性）发生改变时才会重新取值。
而 methods，在重新渲染的时候，函数总会重新调用执行，可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
监听属性 watch: 通过 watch 来响应数据的变化
!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
条件判断：v-if v-else-if v-else,根据表达式的值来决定是否插入dom元素， v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show,根据条件决定是否显示dom元素
for循环 v-for：可以循环数组，和对象, v-for="v in vs"
computed计算属性：methods 和 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖（vue实例对象属性）发生改变时才会重新取值。
而 methods，在重新渲染的时候，函数总会重新调用执行，可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
监听属性 watch: 通过 watch 来响应数据的变化
样式绑定：v-bind:class="", 可以设置一个对象，或者是数组；也可以内联样式v-bind:style=""。
事件处理器：v-on:click="" @click, v-on:keyup @keyup;事件修饰符（.）,按键修饰符
事件处理器：v-on:click="" @click, v-on:keyup @keyup;事件修饰符（.）,按键修饰符
表单：v-model，在表单控件元素上创建双向数据绑定，会根据控件类型自动选取正确的方法来更新元素
修饰符：
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步，<input v-model.lazy="msg" >
.number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）<input v-model.number="age" type="number">
.trim 自动过滤用户输入的首尾空格，<input v-model.trim="msg">
修饰符：
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步，<input v-model.lazy="msg" >
.number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）<input v-model.number="age" type="number">
.trim 自动过滤用户输入的首尾空格，<input v-model.trim="msg">