1. 自定义元素
<!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>Document</title>
<style>
.self {
color: red;
}
</style>
</head>
<body>
<selfElement class="self">这是自定义元素</selfElement>
<!--
上面代码中，<selfElement>就是非标准元素，浏览器不认识它;
这段代码的运行结果是，浏览器照常显示 "这是自定义元素"，这说明浏览器并没有过滤这个元素;
这说明，```浏览器对待自定义元素，就像对待标准元素一样```，只是没有默认的样式和行为;
这种处理方式是写入 HTML5 标准的;
上面这段话的意思是，```浏览器必须将自定义元素保留在 DOM 之中，但不会任何语义; 除此之外，自定义元素与标准元素都一致```;
事实上，浏览器提供了一个```HTMLUnknownElement对象，所有自定义元素都是该对象的实例```;
-->
</body>
</html>
2. 初始Vue
<!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>Document</title>
<!--
1. 插值表达式 {{ ... }}:
a. 将数据填充到HTML标签之中;
b. 插值表达式支持基本的计算操作;
2. 运行过程： vue代码 -> vue框架 -> 原生js代码;
-->
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1 + 3}}</div>
<div>{{'i' + ' love' + ' you'}}</div>
</div>
<script src="../vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({ /* el 和 data固定名字 */
el: '#app', /* 元素挂载位置：值可以是css选择器或者DOM元素 */
data: { /* 模型数据（值是一个对象） */
msg: 'Hello World,Vue!'
}
})
</script>
</body>
</html>
3. Vue实例
<!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>Document</title>
<script src="../vue.js"></script>
<script>
/*
1. 一个 Vue应用由一个通过 ```new Vue```创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成;
2. 数据与方法：
当一个 Vue 实例被创建时，它将 data对象 中的所有的 property 加入到 Vue 的响应式系统中;
当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值;
当这些数据改变时，视图会进行重渲染;
值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的;
也就是说如果你添加一个新的 property，比如： vm.b = 'hi', 那么对 b 的改动将不会触发任何视图的更新;
如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值;
比如：
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
3. 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化;
4.
Vue实例的实行与方法：
它们都有前缀 $，以便与用户定义的 property 区分开来;
$data: 获取Vue实例观察的数据对象;
$el: 获取Vue实例使用的根 DOM 元素;
$watch: 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化;
当监听的表达式的值发生变化时候，将自出发callback函数;
vm.$watch( expOrFn, callback, [options] )
*/
</script>
</head>
<body>
<div id="app">
{{ obj }}
</div>
<script>
var obj = {
name: 'Zhang',
age: 10
};
// 将失去响应式系统跟踪
Object.freeze(obj);
var vm = new Vue({
el: '#app',
data: {
obj: obj,
message: 'HelloWorld',
num: 123
}
});
// Vue的一些实例方法：
console.log(vm.$el === document.getElementById('app')); //true
console.log(vm.$data);
vm.$watch('num',function(newValue,oldValue) {
alert('监听到了'+ '新值：' + newValue + ' 旧值：' + oldValue);
})
</script>
</body>
</html>
4. Vue基础
<!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>Document</title>
<script src="../vue.js"></script>
<script>
/*
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id; 它是div的id;
这意味着我们接下来的改动全部在以上指定的 div内，div外部不受影响;
{{ }} 用于输出对象属性和函数返回值;
<a v-bind:[attributeName]="url"> ... </a> // 新式属性绑定写法
*/
/*
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统;
现在数据和 DOM 已经被建立了关联，所有东西都是响应式的(控制台修改app.message的值，视图将自动发生数据更新);
此时我们不再和HTML元素直接进行交互了，一个Vue应用会将其挂载到一个DOM元素上; 然后对其进行完全控制;
指令，以前缀v开始：它们会在渲染的 DOM 上应用特殊的响应式行为（打开控制台，更给app.message1的值，视图将自动更新数据）;
v-bind:title “将这个元素节点的 title属性 和 Vue 实例的 message1 属性 保持一致”;
*/
</script>
</head>
<body>
<div id="app">
{{ message }} <br>
{{ data }} <br>
{{ test() }} <br>
<hr>
<span v-bind:title = "message1"> {{ message1 }} </span> <br>
<span v-bind:[URL]="url"> {{url}} </span><br>
<div v-if="isSeen">现在你看到我了</div>
<!-- 同样是响应式的，在控制台中输入app.todos.push({name:'LI',age:234})，视图将自动更新显示数据 -->
<ul>
<li v-for="item in todos"> {{ item.name + item.age }} </li>
</ul>
</div>
<hr>
<hr>
<div id="app1">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'HelloWorld',
data: 'beijing',
message1: '页面加载于' + new Date().toLocaleString(),
isSeen: true,
todos: [
{name: 'Zhang', age: 10},
{name: 'WAng', age: 25},
{name: 'Li', age: 32},
],
url: "我是url"
},
methods: {
test() {
return '通过{{}}调用函数';
}
}
});
/*
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定;
v-model 主要作用于表单元素: 当表单内容发生变化时候, message数据自动同步更新;
*/
var app1 = new Vue({
el: "#app1",
data: {
message: 'Hello Vue',
}
});
</script>
</body>
</html>
![[笔记]C++并发编程实战 《三》线程间共享数据](https://img-blog.csdnimg.cn/e651987a11dc4cbc8f498a4bb572a2da.png)
