Vue (progressive front-end js framework), suitable for projects that separate front-end and back-end.
Features: Easy to get started, complete Chinese documentation, developed ecology (many plug-ins)
The first step in writing a vue instance is to introduce vue.js
<script src="js/vue.js"></script>
1. Declarative rendering
Render data to dom structure via { {}}
<div id="app">
<h1>Vue 开始</h1>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
"msg":"你好世界，你好vue！"}
})
</script>
result
2. Instructions
What is an instruction: an instruction is a special attribute that connects a Vue object instance to a template (connects vue and html)
<div id="app">
<h1>Vue的指令</h1>
<h3>文本渲染指令 v-text</h3>
<p v-text="msg"></p>
<p v-text="8+5"></p>
<p v-text="msg+'不能！'"></p>
<p v-text="tip"></p>
<h3>文本渲染指令 v-html<br/>（可以解析html标签）</h3>
<p v-html="tip"></p>
<h3>文本渲染指令 {
{
} }</h3>
<p>{
{
msg}}</p>
<p>可以编写简单的javascript： {
{
2+3}}</p>
<p>msg的长度 {
{
msg.length}}</p>
<p>{
{
msg.split('').reverse().join('')}}</p>
<p>{
{
5>3?'大于':'小于'}}</p>
</div>
<script>
// 什么是指令：指令是连接Vue对象实例与模板的特殊属性（把vue和html连接在一起）
// 什么是vue实例 ：vm就是Vue的实例
// 什么是模板：#app
var vm = new Vue({
el:"#app",//vue指令在#app这个节点启用
data:{
msg:"你好我能做你的朋友吗？",
tip:"<strong>河南</strong>是一个好地方",
}
})
</script>
result
3. Conditional instructions
The difference between v-if and v-show:
when hiding a node,
v-show hides v-if through css
and removes dom to achieve
v-show is suitable for frequent switching between display and hiding
v-if is suitable for a small amount of switching show and hide
<div id="app">
<h1>vue条件渲染指令</h1>
<h3>v-if指令</h3>
<p v-if="isLog">欢迎回来，我的主人！</p>
<p v-else>登录，注册</p>
<h3>v-else-if</h3>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=70">中等</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
<h3>v-show</h3>
<p v-show="isLog">欢迎回来，我的主人！</p>
<!-- <p>v-if与v-show的区别：<br>
当去隐藏一个节点的时候，<br>
v-show通过css方式隐藏<br>
v-if是通过移除dom来实现</p>
<p>v-show适合频繁切换显示与隐藏 <br>
v-if 适合少量切换显示与隐藏
</p> -->
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
isLog:ture,
score:82
}
}
})
</script>
The result (if you change isLog:true to false
Welcome back, my master!
won't show, showlog in Register
）
4. List rendering instructions
<div id="app">
<h3>复杂列表对象</h3>
<p v-for="(item,index) in ls" :key="item.name">
{
{
index+1}}-{
{
item.name}}-{
{
item.age}}
</p>
<h3>对象</h3>
<p v-for="(value,k) in yang" :key="k">{
{
k}}-{
{
value}}</p>
<h3>渲染数字</h3>
<h3>列表渲染指令</h3>
<p v-for="item in list" :key="item+'a'">{
{
item}}</p>
<h3>列表渲染指令带索引</h3>
<p v-for="(item,index) in list" :key="item">{
{
index+1}}-{
{
item}}</p>
<h3>优化列表渲染</h3>
<p v-for="(item,index) in list" v-bind:key="index">{
{
index+1}}-{
{
item}}</p>
<p>key 帮助优化vue内部渲染，key值要求是唯一，还不建议用index，会取数据的id</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data(){
return{
ls:[
{
name:"cxx",age:22},
{
name:"wsj",age:18},
{
name:"小王",age:17},
],
list:['Vue','react','angular','jQuery'],
yang:{
"name":"阳阳",age:16,sex:"男"}
}
}
})
</script>
result
5. Event handling
v-on: event name = "event handler"
such as
v-on:click="showMsg"
v-on:click="showMsg()"
event handler
methods:{
showMsg();
}
If the response function has parentheses, it will not have event parameters by default. If the response function has no parentheses, it will have event parameters by default. If the response function has no parentheses, it will have all event parameters by default.e v e n tEvent parameter If the response function does not have parentheses , it defaults to all event time parameters
If it has parentheses ($event), manually specify event parameters Shorthand
for event binding @click="showMsg"
<div id="app">
<h3>事件响应函数</h3>
<button @click="calc(-1)" :disabled="num<=1">-</button>
<!-- v-model.number 限定为数字 -->
<input type="text" v-model.number="num">
<button @click="calc(1)" :disabled="num>=999">+</button>
<h3>事件处理</h3>
<button v-on:click="num++">{
{
num}}</button>
<h3>事件处理简写</h3>
<button @click="num--">{
{
num}}</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
calc(step) {
// 在js中访问data中num值需要加this
this.num += step;
// 对num进行限定
if (this.num < 1) {
this.num = 1 }
if (this.num > 999) {
this.num = 999 }
}
},
data() {
return {
num: 1
}
}
})
</script>
Results (click "+", "-" all numbers will change accordingly)
6. Attribute Rendering
v-bind: attribute name="attribute value"
v-bind:title="msg"
v-model form attribute
: title="msg" //abbreviation
<div id="app">
<h3>属性渲染指令</h3>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
<p v-bind:title="msg">我是一行可爱的文字</p>
<h3>属性绑定简写</h3>
<p :title="msg">我是一行可爱的文字</p>
<h3>表单属性绑定</h3>
<p>
<!-- checkbox 选中的true，不选中是false -->
隐私条款 <input type="checkbox" v-model="flag" />
</p>
<!-- disabled 取值为true时候，表单不可以用 -->
<button :disabled="!flag">注册</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data (){
return {
msg:"中国伟大的祖国",
flag:false,
}
},
})
</script>
Results (mouse on "
I am a lovely line of text
"There will be a title prompt on the running result)
7. tab case
<div id="app">
<button @click="num=1" :class="num==1?'active':''">html</button>
<button @click="num=2" :class="num==2?'active':''">css</button>
<button @click="num=3" :class="num==3?'active':''">vue</button>
<div v-if="num==1">html内容</div>
<div v-if="num==2">css内容</div>
<div v-if="num==3">vue内容</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:1
}
}
})
</script>
Results (click button to toggle content)
8. Event modifiers
<div id="app">
<h3>事件修饰符</h3>
<button @click.once="say()">按钮</button>
</div>
<script>
var vm=new Vue({
el:"#app",
methods:{
say(){
alert("大声说出来")
}
},
data(){
return{
num:1
}
}
})
</script>
result
