源代码：
<script src="./vue.js"></script>
<h2>8.4开始vue学习</h2>
<h4>接口对接，列表展示+条件判断</h4>
<div id="app">
<ul>
<li v-for="product in products">
{
{ product.id}} {
{product.name }}
<span v-if="product.name === '其他'">
- OUT OF STOCK
</span>
</li>
</ul>
</div>
<hr>
<h4>双向绑定</h4>
<div id="mutualBind">
<p>{
{ message }}</p>
<input v-model="message">
</div>
<hr>
<h4>列表展示</h4>
<div id="appList">
<ul>
<li v-for="todo in todos">
{
{ todo.text }}
</li>
</ul>
</div>
<hr>
<h4>动态绑定元素属性</h4>
<p>将这个元素节点的 title 属性和 Vue 实例的message 属性绑定到一起</p>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<hr>
<h4>控制切换一个元素的显示</h4>
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
<hr>
<h4>数据列表</h4>
<div id="app-4">
<ol>
<li v-for="arr in arrs">
{
{arr.name}}
</li>
</ol>
</div>
<hr>
<h4>练习</h4>
<div id="pre-1">
{
{name}} {
{age}} {
{weight}}
</div>
<div id="pre-2">
<template v-for="userId in userIds">
<ul>
<li v-if="userId.id !='1'">
<div>{
{ userId.id }} </div>
<div>{
{ userId.name }}</div>
</li>
</ul>
</template>
</div>
<h4>处理用户输入</h4>
<div id="app-5">
<p> {
{ message }} </p>
<button v-on:click="reverseMessage"> Reverse Message</button>
</div>
<hr>
<h4>表单输入和应用状态中做双向数据绑定</h4>
<div id="app-6">
<p> {
{ message }} </p>
<input v-model='message' />
</div>
<hr>
<h4>组件</h4>
<div id="com1">
<my-component user-name="czw"></my-component>
</div>
<div id="example"> {
{ message.split('').reverse().join('') }}</div>
<hr>
<h4>悬浮框</h4>
<div id='root'>
<div :title="title">Hello World,我是一个悬浮框测试</div>
</div>
<hr>
<h4>链接地址</h4>
<div id="hrefTest">
<a :href="url">点劳资跳链接</a>
</div>
<hr>
<h4>下拉单选列表</h4>
<div id='aaasfafsd'>
<select v-model="selected">
<option disabled value="">请选择</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<span>Selected: {
{ selected }}</span>
</div>
<hr>
<h4>下拉多选列表(按住shift键进行多选)</h4>
<div id="fruits">
<select name="abc" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="桃子">桃子</option>
<option value="梨子">梨子</option>
</select>
<h2>你选择的水果是：{
{fruits}}</h2>
</div>
<hr>
<h4 V-model & v-for 绑定参数></h4>
<div id="vFor">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value"> {
{ option.text }} </option>
</select><span>Selected: {
{ selected }}</span>
</div>
<hr>
<h4>es5中console.log的性能分析</h4>
<div id="consoleAnalyze">
<input type="button" value="click">
<br><br>
<img src="http://www.ic-edu.net:504/mongo/photo/5f2a24d68f409854543b9044">
</div>
<hr>
<h4>Vue.nextTick()的作用和用法示例</h4>
<div id="textCenter">
//todo 后期再测
<div :style="{
'font-weight': fontWeight,color: color}">作用说明：</div>
<p v-bind:style="{
border : borders ,width: widths }">
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，
原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处，
一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函
数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。<br>
在数据变化后要执行的某个操作，当你设置 vm.someData = 'new value'，DOM并不会马上更新，
而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此
时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完
成更新DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更
新完成后就会调用。
</p>
<button id="firstBtn" @click="testClick()" ref="aa">{
{testMsg}}</button>
</div>
<script>
var vm = new Vue({
el: '#firstBtn',
data: {
testMsg: '原始值'
},
methods: {
testClick: function () {
let that = this;
that.testMsg = "修改后的值";
console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
}
}
})
new Vue({
el: '#textCenter',
data: {
borders: '1px solid #333',
widths: '50%',
fontWeight: 'bold',
color: 'red'
}
})
new Vue({
el: '#consoleAnalyze',
data: {
url: ""
}
})
new Vue({
el: '#vFor',
data: {
selected: 'A', options: [
{
text: 'One', value: 'A' },
{
text: 'Two', value: 'B' },
{
text: 'Three', value: 'C' }]
}
})
new Vue({
el: '#fruits',
data: {
fruits: []
}
})
new Vue({
el: '#aaasfafsd',
data: {
selected: ''
}
})
var example = new Vue({
el: '#example',
data: {
message: '我有电子表'
}
})
var hrefTest = new Vue({
el: '#hrefTest',
data: {
url: 'http://www.baidu.com'
}
})
var app7 = new Vue({
el: '#root',
data: {
title: '悬浮提示'
}
})
var myComponent = Vue.extend({
props: ['userName'],
template: "<div>这是我的第一个component,userName:{
{userName}}</div>"
// + "<h3>{
{userName}}</h3>"
// + "<h3>{
{age}}</h3>"
})
//全局组件
Vue.component('my-component', myComponent)
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue'
}
})
//创建vue对象，使浏览器识别vue对象中的方法
new Vue({
el: '#com1'
})
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse('').join('')
}
}
})
var pre2 = new Vue({
el: "#pre-2",
data: {
userIds: [
{
id: '1', name: 'czw' },
{
id: '2', name: 'bbm' },
{
id: '3', name: 'ccm' },
{
id: '4', name: 'clx' }
]
}
})
var pre1 = new Vue({
el: "#pre-1",
data: {
name: 'czw',
age: '17',
weight: '50'
}
})
var app6 = new Vue({
el: "#app-4",
data: {
arrs: [
{
name: 'java' },
{
name: 'css' },
{
name: 'js' }]
}
})
const app = new Vue({
el: '#app',
data: {
products: []
},
created() {
fetch("http://47.96.88.182:504/sort/getAllLabel")
.then(response => response.json())
.then(json => {
this.products = json.data
})
}
})
new Vue({
el: '#mutualBind',
data: {
message: 'Hello Vue.js!'
}
})
new Vue({
el: '#appList',
data: {
todos: [
{
text: 'Learn JavaScript' },
{
text: 'Learn Vue.js' },
{
text: 'Build Something Awesome' }
]
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
<!-- 日志性能分析 -->
<script>
!function () {
function Leaker() {
this.init();
};
Leaker.prototype = {
init: function () {
this.name = (Array(100000)).join('*');
console.log("Leaking an object %o: %o", (new Date()), this);// this对象不能被回收
},
destroy: function () {
// do something....
}
};
document.querySelector('input').addEventListener('click', function () {
new Leaker();
}, false);
}()
</script>
效果图：
