<script src="js/vue.js"></script>
<body>
<div id="app">
<div>{{msg}}</div>
<!-- 输出Hello world vue -->
<div>{{1+2}}</div>
<!-- 数字类型的自动相加，输出3 -->
<div>{{msg+'----'+123}}</div>
<!-- 字符串拼接，输出Hello world vue----123 -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
</script>
vue之Hello world的步骤：
1，需要提供使用的标签
2，引入vue.js文件
3，可以使用vue的语法做功能
4，把vue提供的数据填充到标签中
el是指元素挂载位置(值是css选择器或者dom元素)
data是模型数据
{{msg}}是差值表达式，填充到html里，进行前端渲染
vue代码运行原理，vue代码--->vue框架--->原生js
什么是vue的指令？
自定义属性就是vue的指令。
v-cloak解决“闪动”问题。
<style type="text/css">
[v-cloak]{
display:none
}
</style>
<div id="app">
<div v-cloak>{{msg}}</div>
<!-- 输出Hello world vue -->
</div>
<script>
/*
v-cloak指令的用法
1，提供样式
[v-cloak]{
display:none
}
2，在差值表达式所在的标签中添加v-cloak指令
原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果，解决了“闪动”问题
*/
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
</script>
v-text，v-html，v-pre它们的作用和区别是什么？
v-text的作用和差值表达式一样，更简洁一些，不存在“闪动问题”，推荐使用v-text而不推荐使用差值表达式。
v-html的作用是能直接渲染出html的样式，但是很不安全，慎重使用，容易遭到xss跨站脚本攻击；本网站内部数据可以使用，第三方数据不能使用。
v-pre的作用是能渲染出html原始信息，不进行编译。
<div id="app">
<div>{{msg}}</div>
<div v-text='msg'></div>
<!-- 输出结果是Hello world vue -->
<div v-html='msg1'></div>
<!-- 输出h1标签大小的HTML字符串 -->
<div v-pre>{{msg}}</div>
<!-- 输出{{msg}} -->
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue",
msg1:'<h1>HTML</h1>'
}
});
什么是vue的数据响应式？什么是vue的数据绑定？
html5中的响应式指屏幕尺寸变化导致样式变化，vue的数据响应式指数据变化导致页面内容变化。
v-once的作用和应用场景是什么？
v-once只编译一次，显示内容后不再具有数据响应式。对于某些不需要修改的数据来说，使用v-once能提高性能，因为不需要监听它的变化。
v-model数据双向绑定的作用和应用场景是什么？
v-model数据双向绑定主要用于input输入框，无论是修改输入框里的内容还是data模型数据里的数据，都会产生变化。代码如下，核心代码是v-model='msg'，绑定了data中的msg
<div id="app">
<div>{{msg}}</div>
<div>
<input type="text" v-model='msg'>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello world vue"
}
});
vue事件绑定的基本用法是什么？
使用v-on进行事件绑定，点击按钮使其加1。
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='num++'>点击</button>
<button @click='handle'>点击2</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
handle: function () {
this.num++;
}
}
});
</script>
当业务量增加的时候，所有的事件处理写在一起效率很低，维护困难，因此可以把事件写在methods里，调用methods里的方法时，直接调用函数名或者直接调用函数。
简单的加法计算器，原理为数据双向绑定和事件绑定
样式部分：
<div id="app">
<h1>简单计算器</h1>
<div>
<span>数值A:</span>
<span>
<input type="text" v-model='a'>
</span>
</div>
<div>
<span>数值B:</span>
<span>
<input type="text" v-model='b'>
</span>
</div>
<div>
<button v-on:click='handle'>计算</button>
</div>
<div>
<span>计算结果:</span>
<span v-text='result'></span>
</div>
</div>
逻辑部分：
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handle: function(){
// 实现计算逻辑
this.result = parseInt(this.a) + parseInt(this.b);
}
}
});
vue属性绑定，可以动态的修改url属性，默认百度url，点击切换后再点击a标签跳转到淘宝，因为修改了url地址
<div id="app">
<a v-bind:href="url">默认百度</a>
<button v-on:click="handle">切换淘宝</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
url:'https://www.baidu.com'
},
methods: {
handle: function(){
// 修改url地址
this.url = 'https://www.taobao.com'
}
}
});
网友评论