commit
bfcdb149a8
13 changed files with 12120 additions and 0 deletions
@ -0,0 +1,5 @@ |
|||||||
|
# Default ignored files |
||||||
|
/shelf/ |
||||||
|
/workspace.xml |
||||||
|
# Editor-based HTTP Client requests |
||||||
|
/httpRequests/ |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<project version="4"> |
||||||
|
<component name="ProjectModuleManager"> |
||||||
|
<modules> |
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/vue_demo.iml" filepath="$PROJECT_DIR$/.idea/vue_demo.iml" /> |
||||||
|
</modules> |
||||||
|
</component> |
||||||
|
</project> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<project version="4"> |
||||||
|
<component name="VcsDirectoryMappings"> |
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" /> |
||||||
|
</component> |
||||||
|
</project> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<module type="WEB_MODULE" version="4"> |
||||||
|
<component name="NewModuleRootManager"> |
||||||
|
<content url="file://$MODULE_DIR$"> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" /> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> |
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" /> |
||||||
|
</content> |
||||||
|
<orderEntry type="inheritedJdk" /> |
||||||
|
<orderEntry type="sourceFolder" forTests="false" /> |
||||||
|
</component> |
||||||
|
</module> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>初识Vue</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
<h1>Hello, {{name}}， {{address}}， {{Date.now()}}</h1> |
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false // 组织开发环境提示 |
||||||
|
|
||||||
|
// 创建Vue实例 |
||||||
|
const x = new Vue({ |
||||||
|
el: '#root', |
||||||
|
data: { |
||||||
|
name: '尚硅谷', |
||||||
|
address: '北京' |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>Vue模板语法</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
<h1>插值语法</h1> |
||||||
|
<h3>你好，{{name}}</h3> |
||||||
|
<hr> |
||||||
|
<h1>指令语法</h1> |
||||||
|
<a v-bind:href="school.url">{{school.name.toUpperCase()}}</a> |
||||||
|
<br> |
||||||
|
<a :href="school.url">{{school.name}}</a> |
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false; |
||||||
|
const x = new Vue({ |
||||||
|
el: '#root', |
||||||
|
data: { |
||||||
|
user: { |
||||||
|
name: 'Roger' |
||||||
|
}, |
||||||
|
school: { |
||||||
|
name: 'leying', |
||||||
|
url: 'http://www.baidu.com' |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>数据绑定</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
<!--完整写法--> |
||||||
|
单向数据绑定：<input type="text" v-bind:value="name"><br> |
||||||
|
双向数据绑定：<input type="text" v-model:value="name"> |
||||||
|
<hr> |
||||||
|
<!--简略写法--> |
||||||
|
单向数据绑定：<input type="text" :value="name"><br> |
||||||
|
双向数据绑定：<input type="text" v-model:name="name"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false |
||||||
|
new Vue({ |
||||||
|
el: '#root', |
||||||
|
data: { |
||||||
|
name: 'Roger' |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>el与data的两种写法</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
<h1>你好， {{name}}</h1> |
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false |
||||||
|
const v = new Vue({ |
||||||
|
el: '#root', |
||||||
|
// data的函数式写法 |
||||||
|
// data: { |
||||||
|
// name: 'Roger' |
||||||
|
// } |
||||||
|
// data的函数式写法 |
||||||
|
data: function () { |
||||||
|
console.log('@@@', this) |
||||||
|
return { |
||||||
|
name: 'Roger' |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
console.log(v) |
||||||
|
// el的新写法 |
||||||
|
v.$mount('#root') |
||||||
|
|
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>Vue中的MVVM</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id='root'> |
||||||
|
<h1>学校名称：{{name}}</h1> |
||||||
|
<h1>学校地址：{{address}}</h1> |
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false |
||||||
|
const vm = new Vue({ |
||||||
|
el: '#root', |
||||||
|
data: function(){ |
||||||
|
return { |
||||||
|
name: '尚硅谷', |
||||||
|
address: '北京' |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
console.log(vm) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>回顾Object.defineProperty方法</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false |
||||||
|
let number = 18 |
||||||
|
let person = { |
||||||
|
name: 'Roger', |
||||||
|
sex: 'male', |
||||||
|
// age: '18' |
||||||
|
} |
||||||
|
Object.defineProperty(person, 'age', { |
||||||
|
// value: '18', |
||||||
|
// enumerable: true, // 控制是否可迭代遍历 |
||||||
|
// writable: true, // 控制是否可以修改 |
||||||
|
// configurable: true //控制是否可以删除 |
||||||
|
|
||||||
|
// get: function () 用于当调用的时候再获取值，可以简写为 get() {} |
||||||
|
get: function () { |
||||||
|
console.log('获取age') |
||||||
|
return number |
||||||
|
}, |
||||||
|
// set function() 用于修改数据是调用 可以简写 set() |
||||||
|
set(value) { |
||||||
|
console.log('新的值为', value) |
||||||
|
number = value |
||||||
|
} |
||||||
|
}) |
||||||
|
console.log(Object.keys(person)) |
||||||
|
console.log(Object.keys(person).length) |
||||||
|
for (let key in person) { |
||||||
|
console.log(key) |
||||||
|
console.log('@', person[key]) |
||||||
|
} |
||||||
|
|
||||||
|
console.log(person) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>事件的基本使用</title> |
||||||
|
<script type="text/javascript" src="../vue.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<script type="text/javascript"> |
||||||
|
Vue.config.productionTip = false |
||||||
|
|
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue