html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html标签</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
<script>
/* 百度富文本编辑器 http://fex.baidu.com/ueditor/*/
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
text:"<b>这里显示一些内容</b>"
}
})
</script>
</body>
</html>
Set方法的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>set方法的使用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{user.age}}岁</h1>
<!-- v-if 不会显示标签 -->
<!-- v-show 会加上 display:none -->
<h1 v-if="user.sex">{{user.sex}}性</h1>
<button type="button" @click="user.age++">增加年龄</button>
<button @click="addSex">添加性别为男性</button>
</div>
<script>
//在做列表渲染的时候一定要加上:key 否者数据发生改变时，样式会错位。
//key一般使用数据的id
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
user:{
age:1
}
},
methods:{
addSex(){
//vm.sex = "男";
/* 追加的对象 对象名 值 */
Vue.set(vm.user,'sex','男');
//vue不允许动态添加根级别的响应式数据
//Vue.set(vm,'money',100);
}
}
})
console.log(vm);
</script>
</body>
</html>性能优化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>性能优化</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<p>{{text}}</p>
<p v-html="text"></p>
<!-- v-pre跳过编译 -->
<div v-pre v-show="false">
<h1>{{text}}</h1>
<h1>{{text}}</h1>
<h1>{{text}}</h1>
</div>
{{text}}
{{text}}
{{text}}
</div>
<script>
/* 百度富文本编辑器 http://fex.baidu.com/ueditor/*/
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
text:"<b>这里显示一些内容</b>"
}
})
</script>
</body>
</html>
自定义指令 - 全局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义指令</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-my-title="title"></h1>
<h2 v-my-title>这个也想居中</h2>
</div>
<script>
/* 百度富文本编辑器 http://fex.baidu.com/ueditor/*/
Vue.config.productionTip = false;
//全局自定义指令
Vue.directive('my-title',function(el, binding){
//文字颜色
el.style.color = "red";
//文本居中
el.style.textAlign = "center";
if(binding.value.length > 0){//如果有内容才添加内容
//内容
//el.innerText = "新华社："+binding.value;
//添加内容
el.innerHTML = "新华社："+binding.value + "<hr>";
}
});
const vm = new Vue({
el:'#box',
data:{
title:"《人民的名义》总监制李学政：王立科曾想让该剧停播"
}
})
</script>
</body>
</html>
自定义指令 - 局部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部 - 自定义指令</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-my-title="title"></h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
title:"国庆节快乐"
},
directives:{//directives不要忘记加s
'my-title':{
bind(el, binding){
//让文字从右往左显示
//split("") 字符串转数组
//reverse() 数组倒叙排序
//join("") 数组转字符串
el.innerHTML = binding.value.split("").reverse().join("");
}
}
}
})
</script>
</body>
</html>
Vue的生命周期（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的生命周期（一）</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 :style="{opacity}">渐变效果</h1>
{{change()}}
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
opacity:1
},
methods:{
change(){
console.log("我执行了");
setInterval(() =>{
this.opacity -= 0.1;
if(this.opacity <= 0){
this.opacity = 1;
}
},1000);
}
}
})
</script>
</body>
</html>
Vue的生命周期（二）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的生命周期（二）</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 :style="{opacity}">渐变效果</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
opacity:1
},
methods:{
},
mounted(){//页面上所有的DOM元素渲染完成之后调用
console.log("我执行了");
setInterval(() =>{
/* this.opacity -= 0.1;
if(this.opacity <= 0){
this.opacity = 1;
} */
this.opacity <= 0 ? this.opacity=1 : this.opacity -= 0.1;
},100);
}
})
</script>
</body>
</html>
组件的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件的基本使用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
<ntitle></ntitle>
</div>
<script>
Vue.config.productionTip = false;
//通过组件的形式调用，创建标题
//1、创建组件
const ntitle = Vue.extend({
template:`
<div>
<h1>{{title}}</h1>
<h3>编辑：{{name}}</h3>
</div>
`,
data(){
return {
title:'科学家研究表明，不吃饭会饿。',
name:'张三'
}
}
})
const vm = new Vue({
el:'#box',
components:{//组件的注册
ntitle
}
})
</script>
</body>
</html>
最后修改于 2021-09-23 17:15:04
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
