Vue2 - 23-03-17
VS Code的工作区
你真的会用vscode吗？——工作区干货
初识Vue-1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<script src="../resources/js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello, {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建Vue示例
new Vue({
el:'#root', //el用于指定当前Vue示例为那个容器服务，值通常为css选择器字符串
// el:document.getElementById('root')
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'Linzepore'
}
})
</script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<script src="../resources/js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>Hello, {{name}}</h1>
<h2>{{address.toUpperCase()}}</h2>
</div>
<p>
{{}}里面可以放data的属性值，也可以放js的表达式<br>
{{1+1}} => 2 //表达式
{{Date.now()}} => 12345456 //js语句（js代码）
</p>
<script type="text/javascript">
Vue.config.productionTip = false;
//创建Vue示例
new Vue({
el:'#root', //el用于指定当前Vue示例为那个容器服务，值通常为css选择器字符串
// el:document.getElementById('root')
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'Linzepore',
address:'gdip'
}
})
//一一对应，不能多个实例对应一个组件，不能多个组件对应一个实例
</script>
</body>
</html>
|
开发者工具条未出现Vue选项
详见->官方解答
我的解决方法是：先关闭选项卡再刷新，然后就出现了
vue模板
标签体与标签属性分别用插值与指令语法
指令语法
视频->Here
<a v-bind:href="url">点我去博客首页1</a>
<a :test="hello">2</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script src="../resources/js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3><!--直接读取data、js表达式，解析标签体内容-->
<br><p >学校：{{school.name.toUpperCase()}}</p>
<hr />
<h1>指令语法</h1>
<!-- 解析标签，不限于属性-->
<a v-bind:href="url.toUpperCase()">点我去博客首页1</a><!--v-bind绑定一个属性或者函数等等等等 -->
<a :test="hello">2</a><!-- : 等同于v-bind: -->
<br><p :loc="school.location">学校：{{school.name.toUpperCase()}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name: 'Linzepore',
url: 'http://blog.zepo.re',
hello: "hello",
school: {
name: 'gdip',
location: '南海'
}
}
})
</script>
</body>
</html>
|
