1--vue介绍、基础指令1-文本渲染指令
指令全是属性
在指令中写数据，不带大括号，在文本节点写数据，需要带大括号{{}}}。
vuejs中有很多 内置指令 ，内置指令的特点：v-开头。
v-text 文本渲染指令 ,缩写 使用 插值表达式 {{}} 双大括号。
v-text 文本渲染指令 特点：只能渲染 纯文本，不能渲染 html标签。
v-html html文本渲染指令 特点：可以渲染html标签包裹的文本。
v-bind:属性名 属性绑定指令 特点：可以数据 到渲染 某个指定的属性上。
v-bind:href="url"
<!-- 1.引入vuejs -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- {{}} 双大括号，叫 插值表达式 ；注意：插值表达式 中 可以进行 计算。-->
<div id="app">
<p>{{message}}</p>
<p>{{number*5}}</p>
<p>{{list}}</p>
</div>
<script>
// 通过构造函数的形式去new一个vue对象
var vm = new Vue({
el: '#app',//el 挂载数据的dom节点
data:{ //data 声明数据
message: '这是我的第一个vue例子',
number:100,
list:['小王','小李']
}
})
</script>
<div id="wrap">
<!-- v-model指令，表单数据绑定指令
-->
<input type="text" name="" id="" v-model="message" >
<br>
<p>{{message}}</p>
</div>
<!--
数据双向绑定
1.从view视图层 改变数据，你改变的这个数据 它 是 通过viewmodel 传递给model模型层；
2.当你修改model模型层中的数据的时候，你改变的这个数据 它 是 通过viewmodel 影响 页面上的数据。
-->
<script>
//通过构造函数，创建一个vue对象
var vm = new Vue({
el:'#wrap',
data:{
message : '你好vue'
}
})
</script>
<div id="app">
<!-- v-text 文本渲染指令 ,缩写 使用 插值表达式 {{}} 双大括号
特点：只能渲染 纯文本，不能渲染 html标签。
-->
<h1 v-text="title"></h1>
<h1>{{title}}</h1>
<!-- v-html html文本渲染指令 特点：可以渲染html标签包裹的文本。-->
<h1 v-html='msg'></h1>
<p>
<a v-bind:href="url">{{name}}</a>
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
title:'库什纳：改变世界对中国的看法 是特朗普的最大遗产',
msg:'<span style="color:red;">你好，中国</span>',
url:'https://www.163.com/',
name:'网易'
}
})
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.input-num{
width: 200px;
margin: 50px auto 0;
}
.input-num button, .input-num span{
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
cursor: pointer;
}
</style>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app" class="input-num">
<button v-on:click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
num:0
},
// 事件上触发的方法，都可以写在methods里
methods:{
sub: function(){
this.num--;
if(this.num < 0){
this.num = 0;
window.alert('购物车清空');
}
},
add: function(){
this.num++;
if(this.num > 5){
this.num = 5;
window.alert('购物车已满');
}
}
}
})
</script>
